2013-04-22 4 views
16

row-fluidクラスがどのように機能するのかを理解することに問題があります。 documentationによれば、レスポンシブデザインなどの流体設計に適合しています。したがって、十分なスペースがあれば、それは同じ行に収まるようにします。それ以外の場合は、次の行に移動します。Twitter-bootstrap:row-fluid classの使い方は?

は、しかし、ここで、この例を見て:最初の3件の記事見出しが最初の行に収まるようhttps://duelify.com/

不思議なこと。 2行目と残りの部分がわずかに右に押されます。しかし、html(下)を見ると、この '副作用'を引き起こすために追加のクラスは必要ありません。

enter image description here

なぜ一列に嵌合物品ヘッダーはありません。どうしてこの間にこのような隙間がありますか?それらの間に隙間なく注文するようにする方法はありますか?

+8

.row流体以降ブートストラップ3から除去されました。上記の質問は、ブートストラップのバージョン3 – Kunal

答えて

17

あなたのケースでは、適切なコードは12スパンクラスまででなければならないspanクラスのすべてのrow-fluidクラス最大要するに

<div class="row-fluid"> 
    <div class="span4"></div> 
    <div class="span4"></div> 
    <div class="span4"></div> 
</div> 
<div class="row-fluid"> 
    <div class="span4"></div> 
    <div class="span4"></div> 
    <div class="span4"></div> 
</div> 

etc... 

ようになるマージンを残しています。最後の子のみがrow-fluidに余白がありません。

Twitter Bootstrap documentationの例をもう一度見てください。 "単純な2列レイアウトの場合は、.rowを作成して適切な数の.span列を追加します。これは12列のグリッドなので、各.spanはそれらの12の列にまたがります。各列(又は親の列数)のため

4

ここではいくつかのことが起こっています。デフォルトでは、流体行のスパンの合計サイズは12になるはずです。ここではもう少し詳しく説明します。したがって、CSSではspan4の幅を約33%と定義していますが、実際には100% 、彼らは新しい行に行きます。しかし、彼らはクリアされていないので、あなたはそれらの周りにループし、ページ上のような列を作ることになります。

2番目の行の左側にスペースがあるのは、ブートストラップで列に余裕を持たせるために「溝」が定義されているからです。余分な列が使用されているため、それらを参照してください。行の最初のスパンの溝を0に減らす特定のCSSがあります。そのため、最初のスパンにスペースがないのはなぜですか。

追加のガターの存在が数学を捨てて、3つのspan4が100%以上の幅で合計して折り返されるため、後続の 'rows'には2つの列しかありません。

0

次のコードは、(応答レイアウトの)コンテナの後に動作します:

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="span4"></div> 
    </div> 
    <div class="row-fluid"> 
     <div class="span4"></div> 
    </div> 
</div> 
関連する問題