ブートストラップ列の折り返し - 不規則な動作

Question

現在、ブートストラップで不規則な列の折り返し動作が発生しています。私の行にラップするいくつかの列は、前の要素の下ではなく、コンテナの上部にフローティングされます。ブートストラップドキュメントによれば

：12の以上の列が単一の列内に配置されている場合

、追加の列の各グループは、一つのユニットとして、新しい行に折り返されます。例えば

、私が持っている：

<div class="container-fluid"> 

    <div class="row first"> 
    <div class="col-sm-6 col-md-3"> 
     Col 1 
    </div> 
    <div class="col-sm-6 col-md-3"> 
     Col 2 
    </div> 
    <div class="col-sm-6 col-md-3"> 
     Col 3 
    </div> 
    <div class="col-sm-6 col-md-3"> 
     Col 4 
    </div> 
    <div class="col-sm-6 col-md-4"> 
     Col 5 
    </div> 
    <div class="col-sm-6 col-md-4"> 
     Col 6 
    </div> 
    <div class="col-sm-12 col-md-4"> 
     Col 7 
    </div> 
    </div> 
    <div class="panel panel-default"> 
    <div class="panel-body"> 
     Panel 
    </div> 
    </div> 
</div> 

そして、最後の列は、私は、ドキュメントに従って正しくないだろうと思ったものを動作しています。次の例のビューポートのサイズを変更すると、小さなビューポートで7番目の列が不規則な動作をしていることがわかります。here列は、親要素の幅/高さを埋めるように見えます。

ブートストラップでこれを修正する方法はありますか？私はマークアップを見落としているように感じますが、今はクロスアイになっています...

Answer 1

私は、あなたの問題は、ブートストラップクラスがフロートしないという事実と関係があると思います。

col-sm-12で7番目の列にfloat: leftを追加するか、または12（sm）になるブレークポイントでのみ表示されるcolの前にclearfixを追加することができます。このような

：あなたはthis fiddle

が、これを行うことを見ることができ

<div class="col-sm-6 col-md-4"> 
      Col 6 
     </div> 

     <div class="clearfix visible-sm"></div> 

     <div class="col-sm-12 col-md-4"> 
      Col 7 
     </div> 

はきれいかもしれません：ここ

<div class="col-xs-12 col-md-4 pull-left"> 
     Col 7 
    </div> 

は、そのソリューションのa demoです。

行をオーバーロードすると多くの問題に遭遇することがあります。できるだけ多くの行を避けて、.rowsに物をラップすることをお勧めします。