空のcol-mdを持つブートストラップ行

Question

col-md-3クラスの子divを持つ行クラスの単純なdivを持っています。

<div class="row"> 
    <div class="col-md-3"> 
    </div> 
    <div class="col-md-3"> 
    </div> 
    <div class="col-md-3"> 
    </div> 
    <div class="col-md-3"> 
    </div> 
    <div class="col-md-3"> 
    </div> 
    <div class="col-md-3"> 
    </div> 
</div> 

最初の行でdivを取得していますが、2番目の行にスペースがあり、残りのdivが残ります。

DIV1  DIV2   DIV3  DIV4 
      DIV5   DIV6  DIV7 

私は「DIV4」であると推測していますが、その原因と修正を行うことはできません。

Answer 1

Avinash !!

ブートストラップのすべての行にはサイズ「12」の列を設定できます。したがって、列サイズが18であるため、3つのdivsのサイズ（12）が満たされ、そのスペースが作成されます。

2つの行を作成し、3〜3つのdivを入れます。 4は、それがグリッド列のためのフロートではなく、フレキシボックスを使用して、この問題を持っていないようブートストラップ：それは:)

Answer 2

注意を動作します

<div class="row"> 
    <div class="col-md-3"> 
    </div> 
    <div class="col-md-3"> 
    </div> 
    <div class="col-md-3"> 
    </div> 
</div> 

<div class="row"> 
    <div class="col-md-3"> 
    </div> 
    <div class="col-md-3"> 
    </div> 
    <div class="col-md-3"> 
    </div> 
    </div> 
</div> 

。ブートストラップ3以前の場合、これは浮動小数点数の制限です。

すべてのアイテムが同じ高さの場合、これは問題ではありませんが、動的なコンテンツと動的なアイテムがある場合は、あなたの手には戦いがあります。

その他の回答のいくつかは既に示唆しているとおり、はマークアップに要素を追加できます。しかし、ブートストラップを、テンプレートに加えて不明な数のアイテム（col--）が行に追加されている場合は、通常、各行に適切な数のアイテムをラップするための何らかのスクリプトが必要になります。また、たとえば、大画面で4列（col-md-3）、小画面で3列（col-md-4）のアイテムがある場合は、4行目ごとにその行に表示されます小さな画面で

CSS3のおかげで、あなたのアイテムが同じグリッドクラスのセットを使用しているときに、スクリプトを使わずにこのアラインメントの問題を解決する方法がいくつかあります。あなたのブートストラップ行にクラスmulti-row-helperを追加すると、下のCSSはアイテムの新しい行の最初のアイテムのフロートをクリアし、上のアイテムの不規則なサイズの影響を受けないようにします。

/** EDIT：ブレイクポイントをデフォルトのブートストラップに更新しました。私は意図せずにカスタムのものを入れました... px値をブレークポイントの値に置き換えてください!! **/

.multi-row-helper div[class~="col-xs-2"]:nth-child(6n+1), 
.multi-row-helper div[class~="col-xs-3"]:nth-child(4n+1), 
.multi-row-helper div[class~="col-xs-4"]:nth-child(3n+1), 
.multi-row-helper div[class~="col-xs-6"]:nth-child(2n+1) { 
    clear: left; 
} 

@media (min-width: 768px) { 
    .multi-row-helper.row > div[class*="col-xs-"] { 
    clear: none; 
    } 
    .multi-row-helper div[class~="col-sm-2"]:nth-child(6n+1), 
    .multi-row-helper div[class~="col-sm-3"]:nth-child(4n+1), 
    .multi-row-helper div[class~="col-sm-4"]:nth-child(3n+1), 
    .multi-row-helper div[class~="col-sm-6"]:nth-child(2n+1) { 
    clear: left; 
    } 
} 
@media (min-width: 992px) { 
    .multi-row-helper.row > div[class*="col-sm-"] { 
    clear: none; 
    } 
    .multi-row-helper div[class~="col-md-2"]:nth-child(6n+1), 
    .multi-row-helper div[class~="col-md-3"]:nth-child(4n+1), 
    .multi-row-helper div[class~="col-md-4"]:nth-child(3n+1), 
    .multi-row-helper div[class~="col-md-6"]:nth-child(2n+1) { 
    clear: left; 
    } 
} 

ない最も簡単な解決策が、あなたはあなたのサイト上では、そのような電子商取引の製品グリッドのようにグリッドを、繰り返しの多くを使用している場合、それは多くの場合、CSSのいくつかの余分なラインにも価値がありますこの問題を解決してください。

何が価値がある、それは少しきれいに使ってSCSSだ場合：

.multi-row-helper { 
    div[class~="col-xs-2"]:nth-child(6n+1), 
    div[class~="col-xs-3"]:nth-child(4n+1), 
    div[class~="col-xs-4"]:nth-child(3n+1), 
    div[class~="col-xs-6"]:nth-child(2n+1) 
    {clear:left;} 


    @media (min-width:768px) { 
    &.row > div[class*="col-xs-"] 
     {clear:none;} 
    div[class~="col-sm-2"]:nth-child(6n+1), 
    div[class~="col-sm-3"]:nth-child(4n+1), 
    div[class~="col-sm-4"]:nth-child(3n+1), 
    div[class~="col-sm-6"]:nth-child(2n+1) 
     {clear:left;} 
    } 

    @media (min-width:992px) { 
    &.row > div[class*="col-sm-"] 
     {clear:none;} 
    div[class~="col-md-2"]:nth-child(6n+1), 
    div[class~="col-md-3"]:nth-child(4n+1), 
    div[class~="col-md-4"]:nth-child(3n+1), 
    div[class~="col-md-6"]:nth-child(2n+1) 
     {clear:left;} 
    } 
}