Kwareta Bootstrap 5 na example grid

Previous Page BS5 Grid XXL
Next Page BS5 Basic Template

Kamannan a na rarrar da tattara doka na Bootstrap 5 na grid.

三等分列

在指定数量的元素上使用 .col 类，Bootstrap 将识别有多少元素（并创建等宽列）。在下面的例子中，我们使用了三个 col 元素，每个元素的宽度为 33.33%。

Example

<div class="row">
  col
  col
  col
</div>

Try It Yourself

使用数字的三个相等的列

您还可以使用数字来控制列宽。只需确保总和等于或小于 12（不需要使用所有 12 个可用列）：

Example

<div class="row">
  <div class="col-4">col-4</div>
  <div class="col-4">col-4</div>
  <div class="col-4">col-4</div>
</div>

Try It Yourself

三不等分列

如需创建不相等的列，您必须使用数字。下例将创建 25%/50%/25% 的拆分：

Example

<div class="row">
  <div class="col-3">col-3</div>
  <div class="col-6">col-6</div>
  <div class="col-3">col-3</div>
</div>

Try It Yourself

设置一列宽度

然而，只设置一列的宽度就足够了，并让兄弟列在周围自动调整尺寸。下例将创建 25%/50%/25% 的拆分：

Example

<div class="row">
  col
  <div class="col-6">col-6</div>
  col
</div>

Try It Yourself

Row Cols

您还可以使用 .row-cols-* 类控制应该出现在彼此旁边的列数（无论有多少列）：

Example

<div class="row row-cols-1">
  <div class="col">1 of 2</div>
  <div class="col">2 of 2</div>
</div>
<div class="row row-cols-2">
  <div class="col">1 of 4</div>
  <div class="col">2 of 4</div>
  3 of 4
  4 of 4
</div>
<div class="row row-cols-3">
  <div class="col">1 of 6</div>
  <div class="col">2 of 6</div>
  <div class="col">3 of 6</div>
  <div class="col">4 of 6</div>  
  <div class="col">5 of 6</div>
  <div class="col">6 of 6</div>
</div>

Try It Yourself

等高

如果一列比另一列高（由于文本或 CSS 高度），其余的将跟随：

Example

<div class="row">
  Lorem ipsum...
  col
  col
</div>

Try It Yourself

嵌套的列

下例展示了如何创建两列布局，其中一列内有另外两列：

Example

<div class="row">
  
    .col-8
    <div class="row">
      .col-6
      .col-6
    </div>
  </div>
  .col-4
</div>

Try It Yourself

响应类

Bootstrap 5 网格系统有五个类：

.col- (超小型设备 - 屏幕宽度小于 576px)
.col-sm- (小型设备 - 屏幕宽度等于或大于 576px)
.col-md- (中型设备 - 屏幕宽度等于或大于 768 像素)
.col-lg- (大型设备 - 屏幕宽度等于或大于 992 像素)
.col-xl- (xlarge 设备 - 屏幕宽度等于或大于 1200px)
.col-xxl- (xxlarge 设备 - 屏幕宽度等于或大于 1400px)

可以组合上述类以创建更动态和灵活的布局。

提示：每个类都按比例放大，因此如果您希望为 sm 和 md 设置相同的宽度，则只需指定 sm。

堆叠到水平

下例展示了如何创建列布局，该布局开始时在超小型设备上堆叠，然后在较大设备（sm、md、lg 和 xl）上变为水平布局：

Example

<div class="row">
  <div class="col-sm-9">col-sm-9</div>
  <div class="col-sm-3">col-sm-3</div>
</div>
<div class="row">
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
</div>

Try It Yourself

Mix and Match

Example

<!-- Split 50%/50% on ultra-small devices, 75%/25% on large devices. -->
<div class="row">
  <div class="col-6 col-sm-9">col-6 col-sm-9</div>
  <div class="col-6 col-sm-3">col-6 col-sm-3</div>
</div>
<!-- Split 58%/42% on ultra-small, small, and medium devices, 66.3%/33.3% on large and extra-large devices. -->
<div class="row">
  <div class="col-7 col-lg-8">col-7 col-lg-8</div>
  <div class="col-5 col-lg-4">col-5 col-lg-4</div>
</div>
<!-- Split 25%/75% on small devices, 50%/50% on medium devices, 33%/66% on large and extra-large devices. Automatically stacked (100%) on ultra-small devices. -->
<div class="row">
  <div class="col-sm-3 col-md-6 col-lg-4">col-sm-3 col-md-6 col-lg-4</div>
  <div class="col-sm-9 col-md-6 col-lg-8">col-sm-9 col-md-6 col-lg-8</div>
</div>

Try It Yourself

No gutter

To change the spacing between columns (extra space), please use any .g-1|2|3|4|5 Class (.g-4 is the default value).

To completely remove the gutters (gutters), please use .g-0:

Example

<div class="row g-0">

Try It Yourself

Previous Page BS5 Grid XXL
Next Page BS5 Basic Template

Course Schedule