7

ブートストラップ 3.0 のドキュメントの「レスポンシブ カラム リセット」という小見出しの下を見ると、次のように書かれています。

「利用可能なグリッドの 4 層を使用すると、特定のブレークポイントで、一方が他方よりも高いため、列が完全にクリアされないという問題に遭遇することになります。これを修正するには、.clearfix とレスポンシブ ユーティリティ クラスです。」

これはどういう意味ですか？フロートは幅に基づいてクリアまたはクリアされないと思いました。ここで何が欠けていますか？

4

1 に答える 1

25

http://getbootstrap.com/css/#grid-responsive-resetsの例は間違っていて、問題を説明していないと思います。

http://getbootstrap.com/css/#grid-responsive-resetsの例は、問題を示していません。

一方が他方より背が高いため、列が正しくクリアされません

clearfix なしの例:

<div class="row">
  <div class="col-xs-6 col-sm-3" style="background-color:red;height:40px;">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3" style="background-color:blue;">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3" style="background-color:green;">.col-xs-6 .col-sm-3 (left)</div>
  <div class="col-xs-6 col-sm-3" style="background-color:yellow;">.col-xs-6 .col-sm-3 (right)</div>
</div>

最初の列 (赤) が 2 番目 (青) よりも高い極小 (xs) では、3 番目 (緑) の列も最初の列の右側に浮きます。

クリアフィックスなし

ここに画像の説明を入力

クリアフィックスで

<div class="row">
  <div class="col-xs-6 col-sm-3" style="background-color:red;height:40px;">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3" style="background-color:blue;">.col-xs-6 .col-sm-3</div>
  <div class="clearfix visible-xs"></div>
  <div class="col-xs-6 col-sm-3" style="background-color:green;">.col-xs-6 .col-sm-3 (left)</div>
  <div class="col-xs-6 col-sm-3" style="background-color:yellow;">.col-xs-6 .col-sm-3 (right)</div>
</div>

ここに画像の説明を入力

col-*-12

この問題は、行に 12 列を追加し、この行の 1 つを 100% (col-*-12) にする場合にも発生します。

次の状況を考慮してください。

必要な大きなグリッドで:

1 | 2 | 3
必要なxsグリッドで：

1 | 2
  3

上記は次の方法で実現できます。

Without clearfix:
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-4">1</div>
<div class="col-xs-6 col-sm-4">2</div>
<div class="col-xs-12 col-sm-4" style="background-color:red;">3</div>
</div>
</div>

赤い背景は、最後の列が最初の列と重なることを示しています。clearfix を追加すると、この背景が削除されます。

With clearfix:  
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-4">1</div>
<div class="col-xs-6 col-sm-4">2</div>
<!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs"></div>
<div class="col-xs-12 col-sm-4" style="background-color:red;">3</div>
</div>
</div>

結果：

ここに画像の説明を入力

上記の重複は、col-12-*クラスにフロートが残っていないことが原因です。https ://github.com/twbs/bootstrap/issues/10152 も参照してください。

https://github.com/twbs/bootstrap/issues/10535で別のイラストを見つけることができます。このフィドルは、clearfix が問題を解決する方法を示しています。<div class="col-sm-3">ここには . がないことに注意してくださいcol-12-*。xs グリッドの列はデフォルトで 100% であり、float がないためcol-xs-12-*、xs グリッドにクラスがない場合と同じように動作します。

于 2013-10-04T08:14:50.270 に答える