ブートストラップにアイテムをラップする

Question

私はブートストラップ3を使用するウェブページを持っています。このウェブページでは、可変個数のアイテムのリストを表示しています。アイテムが横方向にレイアウトされ、アイテムがitem-containerの幅を超えた場合は、次の行に折り返したいと思います。現在、私はfollowingです。このコードでは、私が持っている：あなたがBootplyで見ることができるように、項目がちょうど垂直敷設されている

<div class="container"> 
    <div class="item-wrapper"> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 

    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 

    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 

    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div>  
    </div> 
</div> 

。彼らは水平にレイアウトしたり、ラッピングしたりしていません。私は古いブラウザをサポートしなければならないので、フレックスボックスを使うことはできません。

+-----------+ 
| █ █ █ █ █ | 
| █ █ █ █ █ | 
| █ █ █ █ █ | 
| █ █ █  | 
+-----------+ 

CSSとブートストラップでこれを行う方法はありますか？

Answer 1

だけ.itemインラインを行います。あなたはアイテムラッパー部門に別のクラスを与えることができ、ブートストラップの利益へdisplay: inline-block;

.item-wrapper { 
    float:left; 
    width: 40%; 
} 

.item { 
    height:54px; 
    width:54px; 
    background-color:orange; 
    margin:4px; 
    display: inline-block; 
} 

Bootply

Answer 2

<div class="item-wrapper col-lg-4">