17

row-fluidクラスの仕組みを理解するのに問題があります。ドキュメントによると、レスポンシブ デザインなどの流動的なデザインに適応します。したがって、十分なスペースがある場合は、同じ行に収まります。そうでない場合は、次の行に移動します。

ただし、この例をここで見る: https://duelify.com/

奇妙なことに、最初の 3 つの記事ヘッダーが最初の行に収まります。2列目と残りは少し右に押します。しかし、html (以下) を見ると、この「副作用」を引き起こす追加のクラスは含まれていません。

ここに画像の説明を入力

記事のヘッダーが 1 行に収まらないのはなぜですか。間にこのランダムなギャップがあるのはなぜですか? それらを間に隙間なく並べて表示する方法はありますか?

4

3 に答える 3

17

あなたの場合、適切なコードは次のようになります

<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のクラスで、クラスの最大合計はspan12 までにする必要があります。スパン クラスには左マージンがあります。最後の子のみrow-fluid左マージンがありません。

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

于 2013-04-23T01:44:48.927 に答える
4

ここでいくつかのことが起こっています。デフォルトでは、fluid-row のスパンの合計サイズは 12 になるはずです。ここにはかなり多くのサイズがあるため、CSS でスパン 4 の幅を約 33% と定義すると、実際には 100% を超えています。 、だから彼らは新しい行に行きます。しかし、それらはクリアされていないため、ページのようにループして列を作成することになります。

2 行目の左側にスペースがあるのは、ブートストラップが「ガター」を定義して列にマージンを与えるためです。余分な列が使用されているため、それらが表示されます。行の最初のスパンのガターを 0 に減らす特定の css があるため、最初のスパンにスペースがないのはなぜですか。

後続の「行」には 2 つの列しかありません。これは、追加のガターの存在が計算を台無しにし、3 つの span4 の合計が 100% の幅を超えて折り返されるためです。

于 2013-04-22T23:09:30.753 に答える
0

次のコードは、コンテナーの後で機能します (レスポンシブ レイアウトの場合)。

<div class="container-fluid">
    <div class="row-fluid">
       <div class="span4"></div> 
    </div>
    <div class="row-fluid">
      <div class="span4"></div>
    </div>
</div>
于 2013-04-23T16:40:53.803 に答える