Bootstrap CSS 中的 .row

介绍

.row 是 Bootstrap CSS 中的一个常用类。它被用于创建网格系统中的行元素，主要用于在网格中包含列元素。.row 的设计目的是为了使所有的列元素能够基于相同的水平线排列。

代码示例

以下代码示例展示了如何在 Bootstrap CSS 中使用 .row 类。

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

在这个例子中，我们使用 .container 类来包含整个内容，并创建了一个 .row 类，其中包含了三个 .col-sm-4 类（每个宽度为四分之一）。这个示例展示了如何在一个网格系统中使用行和列元素，以创建响应式布局。

样式

以下是一些常用的 .row 类中可用的样式：

• display：设置为 flex 来启用弹性布局
• flex-direction：设置主轴的方向，可以是 row（默认值）、row-reverse、column 和 column-reverse
• justify-content：设置主轴上的对齐方式，可以是 start、end、center、space-between、space-around 和 space-evenly
• align-items：设置侧轴上的对齐方式，可以是 start、end、center、baseline 和 stretch
• align-content：设置侧轴上的分布方式，可以是 start、end、center、space-between、space-around 和 stretch

总结

.row 类是 Bootstrap CSS 中的一个重要类，用于创建响应式网格布局。它可以与其他类（如 .col-* 类）结合使用，以实现更复杂的布局。如果你想要学习 Bootstrap CSS 中的网格系统，请务必了解 .row 的使用方式。