Question

我知道你可以在嵌套列中嵌套行，但它是否违反规则＆＃39;直接在行中嵌套行？

例如：

<div class="row">

  <div class="row">
     cols in here
  </div>

  <div class="row">
     cols in here
  </div>

  <div class="row">
     cols in here
  </div>

</div>

或者这些必须始终在列中吗？

Answer 1

直接在行中嵌套行是否违反规则？

不违反规则，但不是根据指南的最佳做法。

每bootstrap guidelines, third point under introduction -

..并且只有列可能是行的直接子项。

* _{编辑：This is still true with Bootstrap 4.0 Beta。上述文档的链接将自动重定向到3.3版文档。感谢@Aakash指出这一点。}

这是因为Bootstrap用于布局的填充，通过row-column-row模式嵌套是一种很好的做法，即将一行与一列嵌套到嵌套中。

请参阅下面的代码段中的差异。第一组标记打破了Bootstrap布局，但没有发生任何不好的事情。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="row">
      <div class="col-xs-6">One</div>
      <div class="col-xs-6">Two</div>
    </div>
  </div>
</div>
<hr>
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div class="row">
        <div class="col-xs-6">One</div>
        <div class="col-xs-6">Two</div>
      </div>
    </div>
  </div>
</div>
<hr>
<div class="container">
  <div class="row">
    <div class="col-xs-12">One</div>
    <div class="col-xs-12">Two</div>
    <div class="col-xs-12">Three</div>
  </div>
</div>

Bootstrap：行中有多个嵌套行？

1 个答案: