ブートストラップ：2番目の最後の列の最後の列を停止します

Question

3つの異なる高さの列（lg-box、md-boxおよびsm-box）を表示します。空きスペースを満たしていて、なぜ列6の下に来るのか。それは次の行に表示されるはずです。私は7つ未満または8つ以上の列を持っているが正常に動作しますが、私は合計7つの列がある場合にのみ問題を作成します。列6の空きスペースを埋めることはできますか？ここで

fiddle

HTML

<div class="col-xs-2 lg-box">1</div> 
<div class="col-xs-2 lg-box">2</div> 
<div class="col-xs-2 lg-box">3</div> 
<div class="col-xs-2 lg-box">4</div> 
<div class="col-xs-2 lg-box">5</div> 
<div class="col-xs-2 md-box">6</div> 
<div class="col-xs-2 sm-box">7</div> 

CSS

.col-xs-2{ 
    border:2px solid white; 
    box-sizing: border-box; 
} 
.lg-box{ 
    background-color: red; 
    height: 200px; 
} 
.md-box{ 
    background-color: red; 
    height: 120px; 
} 
.sm-box{ 
    background-color: green; 
    height: 60px 
} 

Answer 1

EDIT：あなたはこの答えに関連した古いブラウザのサポートのために心配している場合、あなたはまた、新しい行を宣言するために、ブートストラップの行クラスを使用することができますhttps://github.com/jonathantneal/flexibility

のように、フレキシボックスのポリフィルを使用することを検討してください。

<div class="row"> 
    <div class="col-xs-2 lg-box">1</div> 
    <div class="col-xs-2 lg-box">2</div> 
    <div class="col-xs-2 lg-box">3</div> 
    <div class="col-xs-2 lg-box">4</div> 
    <div class="col-xs-2 lg-box">5</div> 
    <div class="col-xs-2 md-box">6</div> 
</div> 
<div class="row"> 
    <div class="col-xs-2 sm-box">7</div> 
</div> 

https://jsfiddle.net/wumnLz96/1/

あなたは、列の動的な数を維持したい場合は、それらをラップするフレックスコンテナを使用しています。

<div class="row"> 
    <div class="col-xs-2 lg-box">1</div> 
    <div class="col-xs-2 lg-box">2</div> 
    <div class="col-xs-2 lg-box">3</div> 
    <div class="col-xs-2 lg-box">4</div> 
    <div class="col-xs-2 lg-box">5</div> 
    <div class="col-xs-2 md-box">6</div> 
    <div class="col-xs-2 sm-box">7</div> 
</div> 

.col-xs-2{ 
    border:2px solid white; 
    box-sizing: border-box; 
} 
.lg-box{ 
    background-color: red; 
    height: 200px; 
} 
.md-box{ 
    background-color: red; 
    height: 120px; 
} 
.sm-box{ 
    background-color: green; 
    height: 60px 
} 
.row{ 
    width: 100%; 
    display: flex; 
    flex-wrap: wrap; 
} 

https://jsfiddle.net/wumnLz96/2/

Answer 2

使用0123です左に浮動要素を停止します。

<div class="col-xs-2 sm-box" style="clear: left;">7</div> 

Answer 3

このようなあなたの最後の列の前にclearfixを追加します。

<div class="clearfix visible-xs-block"></div> 
<div class="col-xs-2 sm-box">7</div> 

これは明確にし、あなたがclearfixの可視性と大きく異なるメディアサイズの列数を制御することができるようになります。

たとえば、jsFiddleを参照してください。