Question

在Bootstrap documentation中，它表示要将内容嵌套到网格系统中，我必须在现有{{1}内添加新的.row和.col-sm-*列。列。但是，只添加.col-sm-*列而不添加新的.col-sm-*似乎也可以。我想知道新的.row会有什么不同？

Answer 1

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

尝试这两个，你我们会自己理解。

使用行

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

Answer 2

您可以将列嵌套在另一列中，但它们通常应位于一行内。 这些行有负边距来计算列上的填充，因此如果您的列嵌套在列之间而没有一行，则会弄乱页面的对齐。

如何在Bootstrap中嵌套列？

2 个答案: