Bootstrap中的包裝項

Question

我有一個使用Bootstrap 3的網頁。在這個網頁中，我正在顯示一個可變數目的項目列表。我想要水平佈局這些項目，並且如果項目超過item-container的寬度，請將其包裝到下一行。目前，我有following。在這段代碼中，我有：

<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> 

正如你可以在Bootply看到，該項目僅僅是垂直鋪設。他們沒有水平佈置或包裝。我不能使用flexbox，因爲我必須支持舊版瀏覽器。我試圖讓我的佈局是這樣的：

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

有沒有辦法用CSS和Bootstrap做到這一點？

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">