web-dev-qa-db-ja.com

Twitterの行に単一の全幅の列bootstrap grid

ブートストラップのグリッドを使用する場合、行内の単一の全幅列をマークアップする最良の方法は何ですか？

コンテナーと行を使用して列（.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>

対

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

あるアプローチが他のアプローチより優れていると考えられますか？列はすべてのメディアサイズの幅全体に及ぶため、レスポンシブ機能は必要ありません。レンダリングされた出力は同じである必要がありますが、気付かない微妙な違いがあるかもしれません。コンテナー、行、列を使用するのはやり過ぎのようです…

htmlcsstwitter-bootstrapmarkupgrid-layout
12
knittl

1つなし行/グリッド（Bootstrap独自のドキュメントによる）。それは正しい方法です-それをより多くのクラスでラップしないでください、それは理由もなくより多くのマークアップです。

私はこれについて数日前に投稿しました： col-*-12（col-xs/col-sm/etc）use in Bootstrap

ドキュメンテーション：

enter image description here

全幅要素にはグリッドクラスは必要ありません。

これは正しい方法です：

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