Bootstrap - 列：轻松构建响应式布局

你好，有抱负的网页开发者们！今天，我们将深入探讨Bootstrap最强大的功能之一：列。作为你友好的计算机老师邻居，我很高兴引导你完成这次旅程。相信我，到了这个教程的结尾，你将能够像专业人士一样打造响应式布局！

工作原理

在我们深入了解之前，先来了解一下基础知识。Bootstrap的网格系统基于12列布局。把它想象成把一个披萨分成12片——你可以自己吃掉它们（一个全宽列），也可以和朋友们分享（多个列）。

以下是一个简单的例子来开始：

<div class="container">
<div class="row">
<div class="col-sm-4">列1</div>
<div class="col-sm-4">列2</div>
<div class="col-sm-4">列3</div>
</div>
</div>

在这个例子中，我们在小屏幕和更大的屏幕上创建了三个等宽列。col-sm-4类意味着“在小屏幕上占据12列中的4列”。就像是说，“请给我那12片披萨中的4片！”

对齐

现在我们有了列，让我们学习如何对齐它们。这就像在房间里摆放家具——你希望一切都看起来恰到好处！

垂直对齐

为了垂直对齐列，我们在行上使用类：

<div class="container">
<div class="row align-items-start">
<div class="col">顶部</div>
<div class="col">顶部</div>
<div class="col">顶部</div>
</div>
<div class="row align-items-center">
<div class="col">中间</div>
<div class="col">中间</div>
<div class="col">中间</div>
</div>
<div class="row align-items-end">
<div class="col">底部</div>
<div class="col">底部</div>
<div class="col">底部</div>
</div>
</div>

在这里，我们使用align-items-start、align-items-center和align-items-end将我们的列分别对齐到行的顶部、中间和底部。

水平对齐

对于水平对齐，我们使用justify-content类：

<div class="container">
<div class="row justify-content-start">
<div class="col-4">一</div>
<div class="col-4">二</div>
</div>
<div class="row justify-content-center">
<div class="col-4">一</div>
<div class="col-4">二</div>
</div>
<div class="row justify-content-end">
<div class="col-4">一</div>
<div class="col-4">二</div>
</div>
</div>

这些类(justify-content-start、justify-content-center、justify-content-end)将我们的列分别对齐到容器的左侧、中心和右侧。

列包装

有时候，你可能在行中有多于12个列单位。别担心，Bootstrap会为你处理！它会自动将额外的列包装到新的一行：

<div class="container">
<div class="row">
<div class="col-9">列1</div>
<div class="col-4">列2</div>
<div class="col-6">列3</div>
</div>
</div>

在这个例子中，9 + 4 = 13，这超过了12，所以第二列会包装到新的一行。

列中断

但是，如果你想要自己强制换行呢？这时就用到列中断：

<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>
<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>

<div class="w-100"></div>创建了一个100%宽度的中断，强制下一列在新的一行开始。

重新排序

排序类

Bootstrap允许你改变列的视觉顺序：

<div class="container">
<div class="row">
<div class="col order-3">先是最后一个</div>
<div class="col order-2">先是第二个</div>
<div class="col order-1">先是第三个</div>
</div>
</div>

order-类决定了列的顺序。就像告诉你的列玩抢凳子游戏！

偏移列

偏移类

有时候，你可能想在列之前添加一些空间。这时就用到偏移类：

<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>

offset-md-4类添加了一个等同于4列的左边距，将我们的第二列推向右边。

在响应式断点处清除浮动列

当你的布局在不同屏幕尺寸之间变化时，你可能需要清除浮动的列：

<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>
<div class="w-100 d-none d-md-block"></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>

在这里，d-none d-md-block在小屏幕上隐藏中断，但在中等屏幕和更大的屏幕上显示。

边距工具

Bootstrap提供了边距工具，用于快速调整间距：

<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
</div>

ml-auto类通过自动调整左边距将第二列推向右边。

独立列类

最后，你可以不使用行包装器，直接使用列类，以获得更多灵活性：

<div class="container">
<div class="col-3 bg-light p-3 border">
.col-3: 宽度为25%
</div>
<div class="col-sm-9 bg-light p-3 border">
.col-sm-9: 在sm断点以上宽度为75%
</div>
</div>

这种方法给你的布局提供了更多的控制，特别是对于复杂的布局。

就这样，伙计们！你刚刚学习了Bootstrap列的里里外外。记住，熟能生巧，所以不要害怕用这些概念做实验。很快，你将能够创建出连最经验丰富的网页开发者都会嫉妒的响应式布局！

以下是我们覆盖的列类的快速参考表：

类	描述
col-*	基本列类 (* 可以是1-12)
col-sm-*	小屏幕及以上的列
col-md-*	中屏幕及以上的列
col-lg-*	大屏幕及以上的列
col-xl-*	超大屏幕的列
offset--	偏移列 (* 可以是sm, md, lg, xl)
order-*	重新排序列 (* 可以是1-12)

快乐编码，愿你的布局永远响应式！

Credits: Image by storyset