부트 스트랩에 항목 배치하기

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> 

. 그들은 수평으로 배치하거나 포장하지 않습니다. 이전 버전의 브라우저를 지원해야하기 때문에 flexbox를 사용할 수 없습니다.

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

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