引导程序：行内有多个嵌套行？ [英] Bootstrap: Multiple nested rows within row?

问题描述

我知道您可以在嵌套列中嵌套行，但是直接在行中嵌套行是否违反规则？

I know you can nest rows within nested columns, but is it 'against the rules' to nest rows directly within rows?

例如：

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

还是这些值必须始终在列中？

Or must these always be within columns?

推荐答案

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

is it 'against the rules' to nest rows directly within rows?

不违反规则，但不是指导原则中的最佳做法。

Not against the rules as such, but not a best practice as per the guidelines.

每个引导程序指南，正在介绍的第三点 a>-

..只有列可以是行的直接子代。

..and only columns may be immediate children of rows".

* _编辑：这仍然是正确的使用Bootstrap 4.0 Beta 。指向以上文档的链接将自动重定向到3.3版文档。谢谢您 @Aakash 指出这一点。

* _{This is still true with Bootstrap 4.0 Beta. The link to the docs above will automatically redirect to the version 3.3 documentation. Thank you @Aakash for pointing this out.}

这是因为Bootstrap在其布局中使用了填充，所以通过 row-column-row 模式，即在一行中嵌套一行，以嵌套。

This is because of the padding which Bootstrap uses for its layout, it is a good practice to nest via row-column-row pattern i.e. nest a row with one column across to nest.

查看摘要中的差异第一组标记破坏了Bootstrap布局，尽管没有发生任何不良情况。

See the difference in the snippet below. The first set of markup breaks the Bootstrap layout, although nothing bad happens.

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

这篇关于引导程序：行内有多个嵌套行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！