Html 如何在引导中嵌套列？

在Bootstrap中指出，要用网格系统嵌套内容，我必须在现有的

.col sm-*

列中添加一个新的

.row

和一组

.col sm-*

列。但是，只嵌套

.col sm-*

列，而不添加新的

.row

似乎也可以

---

我想知道新的

.row

有什么区别？

行

用于创建水平列组。行还有助于将元素保持在同一行中。这样做将使所有元素都具有良好的结构格式

两个都试一下，我们会自己理解的

使用行

你好，世界！
调整浏览器窗口的大小以查看效果

.col-sm-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-sm-4

不使用ROW

你好，世界！
.col-sm-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-sm-4

您可以将列嵌套在另一列中，但它们通常应该在一行中行具有负边距，用于说明列上的填充，因此，如果列嵌套在列中，而列之间没有行，则会打乱页面的对齐方式。

<div class="container-fluid">
  <h1>Hello World!</h1>
  <p>Resize the browser window to see the effect.</p>
  <div class="row">
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
  </div>
   <div class="row">
    <div class="col-sm-4" style="background-color:red;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:yellow;">.col-sm-4</div>
</div>

<div class="container-fluid">
  <h1>Hello World!</h1>
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:red;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:yellow;">.col-sm-4</div>
</div>