l-1

WEB教程

主页/Bootstrap V5.3 中文手册/布局方式 Layout/Columns 列类

Bootstrap V5.3 中文手册

Columns 列类

了解如何使用一些对齐、排序和偏移选项来修改列，这要归功于我们的 flexbox 网格系统。另外，请参阅如何使用列类来管理非网格元素的宽度。

小心！请务必先阅读网格页面，然后再深入了解如何修改和自定义网格列。

它们如何工作

  • 列建立在网格的 flexbox 架构之上。Flexbox 意味着我们可以选择在行级别更改单个列和修改列组。您可以选择列的增长、缩小或以其他方式更改的方式。

  • 构建网格布局时，所有内容都放在列中。Bootstrap 网格的层次结构从容器到行，再到列再到您的内容。在极少数情况下，您可以合并内容和列，但请注意可能会产生意想不到的后果。

  • Bootstrap 包括用于创建快速响应式布局的预定义类。每个网格层有六个断点和十几列，我们已经构建了数十个类，供您创建所需的布局。如果您愿意，可以通过 Sass 禁用此功能。

对准

使用 Flexbox 对齐实用程序垂直和水平对齐列。

垂直对齐

更改与任何响应式类的垂直对齐方式。align-items-*

三列之一
三列之一
三列之一
[HTML全文] 
<div class="container text-center">
  <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>
三列之一
三列之一
三列之一
[HTML全文] 
<div class="container text-center">
  <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>
三列之一
三列之一
三列之一
[HTML全文] 
<div class="container text-center">
  <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>

或者，使用任何响应式类单独更改每列的对齐方式。.align-self-*

三列之一
三列之一
三列之一
[HTML全文] 
<div class="container text-center">
  <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>

水平对齐

更改与任何响应式类的水平对齐方式。justify-content-*

两列之一
两列之一
两列之一
两列之一
两列之一
两列之一
两列之一
两列之一
两列之一
两列之一
两列之一
两列之一
[HTML全文] 
<div class="container text-center">
  <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
由于 9 + 4 = 13 > 12，因此这个 4 列宽的 div 作为一个连续单元包装到新行中。
.col-6
后续列沿着新行继续。
[HTML全文] 
<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 中将列分成新行需要一个小技巧：添加一个元素，其中包含你想将列换行到新行的位置。通常，这是通过多个 s 来完成的，但并非每个实现方法都可以解释这一点。width: 100%.row

.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
[HTML全文] 
<div class="container text-center">
  <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
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
[HTML全文] 
<div class="container text-center">
  <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>

    <!-- Force next columns to break to new line at md breakpoint and up -->
    <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>

重组

订单类

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

DOM 中第一，不应用顺序
DOM 排名第二，订单较大
DOM 排名第三，顺序为 1
[HTML全文] 
<div class="container text-center">
  <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-lastorderorder: -1order: 6.order-*

DOM 中第一个，最后排序
DOM 中排名第二，无序
DOM 第三，第一下单
[HTML全文] 
<div class="container text-center">
  <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>

如果您需要更多类，您可以通过修改我们的 Sass 地图来添加新类。阅读我们的 Sass 映射和循环文档或我们的 修改实用程序文档 了解详细信息。.order-*$utilities

$utilities: map-merge(
  $utilities,
  (
    "order": map-merge(
      map-get($utilities, "order"),
      (
        values: map-merge(
          map-get(map-get($utilities, "order"), "values"),
          (
            6: 6, // Add a new `.order-{breakpoint}-6` utility
            last: 7 // Change the `.order-{breakpoint}-last` utility to use the next number
          )
        ),
      ),
    ),
  )
);

偏移列

您可以通过两种方式偏移网格列：我们的响应式网格类和我们的保证金实用程序。网格类的大小与列相匹配，而边距对于偏移宽度可变的快速布局更有用。.offset-

偏移类

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

.col-md-4
.col-md-4 .偏移量-md-4
.col-md-3 .偏移-md-3
.col-md-3 .偏移-md-3
.col-md-6 .偏移-md-3
[HTML全文] 
<div class="container text-center">
  <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
[HTML全文] 
<div class="container text-center">
  <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-自动
.col-md-3 .ms-md-自动
.col-md-3 .ms-md-自动
.col-auto .me-auto
.col-auto 域名
[HTML全文] 
<div class="container text-center">
  <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>

独立列类

这些类也可以在 a 之外使用，为元素提供特定的宽度。每当列类用作行的非直接子项时，都会省略填充。.col-*.row

.col-3：宽度为 25%
.col-sm-9：宽度高于 SM 断点 75%
[HTML全文] 
<div class="col-3 p-3 mb-2">
  .col-3: width of 25%
</div>

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

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

占 位 符响应式浮动图像

一段占位符文本。我们在这里使用它来展示 clearfix 类的用法。我们在这里添加了一些无意义的短语，以演示列如何与浮动图像交互。

如您所见，段落优雅地环绕浮动图像。现在想象一下，这里有一些实际内容会是什么样子，而不仅仅是这个无聊的占位符文本，它一直持续下去，但实际上没有传达任何有形的信息。它只是占用空间，不应该真正阅读。

然而，你仍然坚持不懈地阅读这个占位符文本，希望得到更多的见解，或者一些隐藏的内容复活节彩蛋。也许是一个笑话。不幸的是，这里没有这些。

[HTML全文] 
<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>

声明：该Bootstrap v5.3 内容来自Bootstrap v5.3官方网站；中文翻译是使用Microsoft Edge浏览器免费翻译而来，且部分存在结合了Deepseek及人工翻译。