列

借助我们的flexbox网格系统，了解如何使用一些对齐，排序和偏移选项来修改列。另外，可以额参考如何使用列类来管理非网格元素的宽度。

更新于: 2023-04-30 14:28:21 查看: 581

发布于: 2021-9-9 07:53 发布者: 大米

工作原理

列基于网格的flexbox体系结构。 Flexbox意味着我们具有在行级别更改单个列和修改列组的选项。您可以选择列的增长，收缩或其他更改方式。
在构建网格布局时，所有内容都在列中。 Bootstrap网格的层次结构从容器到行再到列再到内容。在极少数情况下，你可以结合使用内容和列，但要注意可能会产生一些不可预知的后果。
Bootstrap包含用于创建快速，响应式布局的预定义类。每个网格层都有六个断点和一列列，我们已经为你构建了数十个类来创建所需的布局。当然，你也可以通过Sass禁用它。

对齐

使用flexbox对齐工具可垂直和水平对齐列。

垂直对齐

One of three columns

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

One of three columns

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

水平对齐

One of two columns

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-evenly">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

列容器

如果在一行中放置超过12列，则每组额外的列将作为一个列容器放在新行上。

.col-9

.col-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.

.col-6
Subsequent columns continue along the new line.

<div class="container">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
    <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
  </div>
</div>

分栏符

在flexbox中将列拆分为新行需要一个小技巧：在你希望将列包装到新行的任何地方添加宽度为 width: 100% 的元素。通常，这是通过多个 .row 完成的，但是并非每种实现方法都可以解决这个问题。

.col-6 .col-sm-3

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

    <!-- Force next columns to break to new line -->
    <div class="w-100"></div>

    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  </div>
</div>

您也可以使用我们的 响应式显示工具 在特定的断点上应用此断点。

.col-6 .col-sm-4

<div class="container"> <div class="row"> <div class="col-6 col-sm-4">.col-6 .col-sm-4</div> <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>  <div class="w-100 d-none d-md-block"></div> <div class="col-6 col-sm-4">.col-6 .col-sm-4</div> <div class="col-6 col-sm-4">.col-6 .col-sm-4</div> </div> </div>

重新排序

Order 类

使用 .order- 来控制内容的视觉顺序。这些类是响应式的，因此你可以按断点设置顺序（例如 .order-1.order-md-2）。包括对所有六个网格层中的 1 到 5 的支持。

First in DOM, no order applied

Second in DOM, with a larger order

Third in DOM, with an order of 1

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-5">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

还有响应式 .order-first 和 .order-last，它们分别通过应用 order: -1 和 order: 6 来更改元素的顺序。这些类也可以根据需要与编号的 .order-* 混合在一起。

First in DOM, ordered last

Second in DOM, unordered

Third in DOM, ordered first

<div class="container">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered first
    </div>
  </div>
</div>

列偏移>

你可以通过两种方式偏移网格列：我们的响应式 .offset- 网格类和间隔。网格类的大小可匹配列，而边距对于偏移宽度可变的快速布局更有用。

Offset 属性

使用 .offset-md-* 类将列向右移动。这些类通过 * 列将一列的左边距增加。例如， .offset-md-4 将 .col-md-4 移动到四列上。

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>

除了在响应断点处清除列外，您可能还需要重置偏移量。请参见网格示例中的实际操作。

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<div class="container">
  <div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>

边距效果

随着v4中向flexbox的迁移，您可以使用诸如 .me-auto 之类的边距实用程序来迫使同级列彼此分离。

.col-md-4

.col-md-4 .ms-auto

.col-md-3 .ms-md-auto

.col-auto .me-auto

.col-auto

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto me-auto">.col-auto .me-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

单独列

.col-* 类也可以在 .row 外部使用，以赋予元素特定的宽度。每当将列类用作行的非直接子级时，都将省略填充。

.col-3: width of 25%

.col-sm-9: width of 75% above sm breakpoint

<div class="col-3 bg-light p-3 border">
  .col-3: width of 25%
</div>
<div class="col-sm-9 bg-light p-3 border">
  .col-sm-9: width of 75% above sm breakpoint
</div>

这些类可以与实用程序一起使用，以创建响应的浮动图像。如果文本较短，请确保将内容包装在 .clearfix 包装器中以清除浮点数。

A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.

As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.

And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.

<div class="clearfix">
  <img src="..." class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">

  <p>
    A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
  </p>

  <p>
    As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.
  </p>

  <p>
    And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.
  </p>
</div>

扫描二维码，手机查看

声明：部分数据/图片来源互联网，不代表Hluse Doc.,真实性请妥善甄别。