带有twitter引导网格的行中的单个全宽列

Question

使用bootstrap的网格时,连续标记单个全宽列的最佳方法是什么？

你是否必须使用容器和行来保存列(.container > .row > .col-xs-12 > .actual-content),或者你可以完全摆脱行和列,只需使用包装容器(.container > .actual-content)？

让我们说吧

<div class="container">
  <div class="row">
    <!-- multiple columns -->
  </div>

  <div class="row">
    <div class="col-xs-12">
      <p>Actual content goes here. It will span the entire width.</p>
    </div>
  </div>

  <div class="row">
    <!-- multiple columns -->
  </div>
</div>

VS

<div class="container">
  <div class="row">
    <!-- multiple columns -->
  </div>

  <p>Actual content goes here. It will span the full width.</p>

  <div class="row">
    <!-- multiple columns -->
  </div>
</div>

一种方法被认为优于另一种吗？由于列跨越所有介质尺寸的整个宽度,因此我不需要任何响应功能.渲染输出应该是相同的,但也许有一些我不知道的细微差别.使用容器,行和列似乎有点矫枉过正......

Answer 1

在一个没有根据引导自己的文档行/格.这是正确的方法 - 不要用更多的类包装它,这是没有理由的更多标记.

我几天前发布了这个:col - * - 12(col-xs/col-sm/etc)在Bootstrap 3中使用

文档:

全宽元素不需要网格类.

这是正确的方法:

<div class="container">
  <div class="row">
    <!-- multiple columns -->
  </div><!-- closing .row -->

  <p>Actual content goes here. It will span the full width.</p>

  <div class="row">
    <!-- multiple columns -->
  </div><!-- closing .row -->
</div><!-- closing .container -->