Bootstrap 4 Grid مكدس إلى أفقي
مثال شبكة Bootstrap 4: مكدس إلى أفقي
سننشئ نظام شبكة أساسيًا يبدأ مكدسًا على أجهزة صغيرة جدًا ، قبل أن يصبح أفقيًا على الأجهزة الأكبر حجمًا.
يوضح المثال التالي تخطيطًا بسيطًا من عمودين "مكدس إلى أفقي" ، مما يعني أنه سينتج عنه تقسيم بنسبة 50٪ / 50٪ على جميع الشاشات ، باستثناء الشاشات الصغيرة الإضافية ، والتي سيتم تكديسها تلقائيًا (100٪):
مثال: مكدس إلى أفقي
<div class="container">
<div class="row">
<div class="col-sm-6 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6 bg-warning">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
نصيحة: تشير الأرقام الموجودة في .col-sm-*الفئات إلى عدد الأعمدة التي يجب أن تمتد على div (من 12). لذلك ، .col-sm-1يمتد عمودًا واحدًا ، .col-sm-4ويمتد إلى 4 أعمدة ،
.col-sm-6ويمتد إلى 6 أعمدة ، وما إلى ذلك.
ملاحظة:
تأكد من أن المجموع يصل إلى 12 أو أقل (ليس مطلوبًا أن تستخدم جميع الأعمدة الـ 12 المتوفرة):
نصيحة: يمكنك تحويل أي تخطيط ذي عرض ثابت إلى تخطيط كامل العرض عن طريق تغيير .containerالفئة إلى .container-fluid:
مثال: حاوية السوائل
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
أعمدة التخطيط التلقائي
في Bootstrap 4 ، توجد طريقة سهلة لإنشاء أعمدة متساوية العرض لجميع الأجهزة: ما عليك سوى إزالة الرقم من واستخدام الفئة فقط في عدد محدد من
عناصر العمود . سيتعرف Bootstrap على عدد الأعمدة الموجودة ، وسيحصل كل عمود على نفس العرض. تحدد فئات الحجم متى يجب أن تكون الأعمدة متجاوبة:.col-size-*.col-size
<!-- Two columns: 50% width on all screens, except for extra small (100%
width) -->
<div class="row">
<div class="col-sm">1 of
2</div>
<div class="col-sm">2 of 2</div>
</div>
<!-- Four
columns: 25% width on all screens, except for extra small (100% width)-->
<div class="row">
<div class="col-sm">1 of 4</div>
<div class="col-sm">2 of 4</div>
<div class="col-sm">3
of 4</div>
<div class="col-sm">4 of 4</div>
</div>