css - span4タグに関するTwitterBootstrapレスポンシブな問題

Question

何が起こっているのかを知るために、ここにデモサイトがあります。一番下までスクロールすると、9つの個別の投稿が表示され、すべて適切に配置されています。ただし、画面を1232px未満に縮小すると、7番目の投稿が他の投稿から離れて下に移動することがわかります。

現在、デフォルトのスタイルを使用して、row、次にspan4を使用してそれらを整列させています。なぜこれが起こるのか誰かが説明できますか？そしてそれを修正する方法はありますか？

Answer 1

スパンの合計は合計で12になります。ただし、サンプルサイトの合計は40を超えます。意図したとおりに使用しないとどうなるかについて、明確な振る舞いはないと思います。

Bootstrapホームページから

「デフォルトのブートストラップグリッドシステムは12列を利用します」

したがって、スパンの合計は1行あたり12に追加する必要があります。すなわち。

<div class="row">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>
<div class="row">
  <div class="span3">...</div>
  <div class="span3">...</div>
  <div class="span3">...</div>
</div>
<div class="row">
  <div class="span7">...</div>
  <div class="span3 offset2">...</div>
</div>