شبکه 5 بوت استرپ: از چیدمان عمودی به افقی

مثال شبکه: چیدمان افقی

اجازه دهید یک سیستم شبکه ساده‌ای ایجاد کنیم که در ابتدا در دستگاه‌های فوق‌العاده کوچک به صورت عمودی قرار می‌گیرد و سپس در دستگاه‌های بزرگ‌تر به صورت افقی قرار می‌گیرد.

در اینجا مثالی از یک چیدمان دو ستون ساده "چیدمان افقی" آورده شده است، که به این معناست که در تمام صفحه‌های نمایش، 50/50 تقسیم خواهد شد، با استثنای صفحه‌های نمایش فوق‌العاده کوچک که به صورت خودکار به صورت عمودی قرار خواهند گرفت (100%):

مثال: چیدمان افقی

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 bg-primary">
      <p>ستون 1 ...</p>
    </div>
    <div class="col-sm-6 bg-dark">
      <p>ستون 2 ...</p>
    </div>
  </div>
</div>

به طور مستقیم امتحان کنید

نکته:.col-sm-* اعداد در کلاس نشان‌دهنده تعداد ستون‌هایی است که div باید از آن‌ها عبور کند (در مجموع 12 ستون). بنابراین،.col-sm-1 یک ستون را پشت سر هم بگذارید،.col-sm-4 چهار ستون را پشت سر هم بگذارید،.col-sm-6 شش ستون را پشت سر هم بگذارید و غیره.

توجه:مطمئن شوید که مجموع برابر یا کمتر از 12 است (نیاز به استفاده از تمام 12 ستون موجود نیست):

نکته:از طریق .container-fluid کلاس را به .container، شما می‌توانید هر full-width طرح به fixed-width طرح پاسخگو:

مثال: ظرفیت پاسخگو

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <p>ستون 1 ...</p>
    </div>
    <div class="col-sm-6">
      <p>ستون 2 ...</p>
    </div>
  </div>
</div>

به طور مستقیم امتحان کنید

ستون‌های پیکربندی شده خودکار

در Bootstrap 5، روشی ساده برای ایجاد ستون‌های یکسان برای همه دستگاه‌ها وجود دارد: فقط باید از .col-size-* اعداد را در میان بگذارید و فقط از col عناصر استفاده کنید .col-size کلاس‌ها. Bootstrap تعداد ستون‌ها را تشخیص می‌دهد و هر ستون دارای عرض یکسانی خواهد بود. کلاس‌های اندازه (sm، md و غیره) تعیین می‌کنند که چه زمانی باید پاسخگو باشند:

<!-- دو ستون: 50% عرض تمام صفحه‌ها، به استثنای دستگاه‌های کوچک‌تر (عرض 100%) -->
<div class="row">
  <div class="col-sm">1 از 2</div>
  <div class="col-sm">2 از 2</div>
</div>
<!-- چهار ستون: 25% عرض تمام صفحه‌ها، به استثنای دستگاه‌های کوچک‌تر (عرض 100%) -->
<div class="row">
  <div class="col-sm">1 از 4</div>
  <div class="col-sm">2 از 4</div>
  <div class="col-sm">3 از 4</div>
  <div class="col-sm">4 از 4</div>
</div>

به طور مستقیم امتحان کنید