부트 스트랩이있는 다른 열의 가운데 4 열

Question

나는 9 개의 열을 가지고 있으며 여기에 4 개의 열이 더 있습니다. 나는 그들이 최대 폭의 198px로 설정되어 있기 때문에 칼럼의 중앙에 4 개의 칼럼을 갖기 위해 노력하고있다.

<div class="content col-md-9"> 
    <div class="item col-md-3"> 
     <img src="assets/img/demo/1.png" width="198" height="266" alt="" class="img-responsive" /> 
     <p class="hs-label"></p> 
     <p class="hs-label"></p> 
    </div> 
    <div class="item col-md-3"> 
     <img src="assets/img/demo/2.png" width="198" height="266" alt="" class="img-responsive" /> 
    </div> 
    <div class="item col-md-3"> 
     <img src="assets/img/demo/3.png" width="198" height="266" alt="" class="img-responsive" /> 
     <p class="hs-label"></p> 
     <p class="hs-label"></p> 
     <p class="hs-label"></p> 
    </div> 
    <div class="item col-md-3"> 
     <img src="assets/img/demo/4.png" width="198" height="266" alt="" class="img-responsive" /> 
     <p class="hs-label"></p> 
     <p class="hs-label"></p> 
     <p class="hs-label"></p> 
    </div> 
    <div class="item col-md-3"> 
     <img src="assets/img/demo/5.png" width="198" height="266" alt="" class="img-responsive" /> 
    </div> 
    <div class="item col-md-3"> 
     <img src="assets/img/demo/6.png" width="198" height="266" alt="" class="img-responsive" /> 
     <p class="hs-label"></p> 
     <p class="hs-label"></p> 
    </div> 
</div> 

은 CSS :

.content.col-md-9 > .item.col-md-3 { 
    background: #ffffff; 
    max-width: 198px; 
    border: 5px solid #ffffff; 
    padding: 0!important; 
    margin: 7px; 
} 

.content.col-md-9 > .item.col-md-3 img { 
    margin-bottom: 0px; 
} 

.content.col-md-9 > .item.col-md-3 .hs-label { 
    background: #cccccc; 
    text-transform: uppercase; 
    width: auto; 
    display: inline-block; 
    padding: 2px 5px; 
    color: #ffffff; 
    margin: 5px 0 0 0; 
} 

로서 설명

각 컬럼은 198px의 최대 폭으로 설정된다. col-md-3의 중심이 모두 col-md-9의 왼쪽에 있어야하므로 col-md-3의 왼쪽과 오른쪽에 같은 공간이 있어야합니다.

Answer 1

가장 기본적인 예로, 부트 스트랩에서 다음을 사용하여이 스타일의 레이아웃을 구현할 수 있습니다.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-xs-10 col-xs-offset-1"> 
 
     <div class="well clearfix"> 
 
     
 
\t \t <div class="col-xs-3"> 
 
      <div class="well text-center">Test</div> 
 
\t \t </div> 
 
     
 
\t \t <div class="col-xs-3"> 
 
      <div class="well text-center">Test</div> 
 
\t \t </div> 
 

 
\t \t <div class="col-xs-3"> 
 
      <div class="well text-center">Test</div> 
 
\t \t </div> 
 

 
     <div class="col-xs-3"> 
 
      <div class="well text-center">Test</div> 
 
\t \t </div> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

참고 : SO 코드 조각의 목적을 위해 나는 .container-fluid 및 .col-xs-*을 사용했다. 또한 .col-xs-9을 .col-xs-10으로 변경하여 양쪽에서 동일한 오프셋을 허용합니다. 더 큰 범위의 디자인에 더 잘 부합하도록이 값을 조정해야 할 수도 있습니다.