부트 스트랩 : 두 개의 행

각 열에 대해 같은 크기를 유지하지만 두 번째 행을 중심으로하는 방법에 대한 어떤 생각 일곱 동일한 크기의 열 ... 부트 스트랩 : 두 개의 행

가 (다른 단어에서, 1.5 열 생성)

<div class="container"" 
    <div class="row"> 
     <div class="col-sm-3"> 
      1 
     </div> <!-- close .col --> 
     <div class="col-sm-3"> 
      2 
     </div> <!-- close .col --> 
     <div class="col-sm-3"> 
      3 
     </div> <!-- close .col --> 
     <div class="col-sm-3"> 
      4 
     </div> <!-- close .col --> 
    </div><!-- close .row--> 
    <div class="row"> 
     <div class="col-sm-3 col-sm-offset-1"> 
      5 
     </div> <!-- close .col --> 
     <div class="col-sm-3"> 
      6 
     </div> <!-- close .col --> 
     <div class="col-sm-3"> 
      7 
     </div> <!-- close .col --> 
    </div><!-- close .row--> 
</div><!-- close container -->

당신은 기본적으로 1.5에 의해 상쇄되기 때문에

출처

2014-10-09 supershivas

당신이 행 # 2의 첫 번째 열을 일치하도록 행 # 1의 처음 두 열을 원하십니까? – clapas

사실, 첫 번째 행은 이미 올바른 모양을 가지고 있지만이 구조에 따라 두 번째 행을 가운데에 맞춰야합니다. row1 : 3 3 3 3 row2 : 1.5 3 3 3 1.5 – supershivas

@DavidG 예를 들어 주셔서 감사하지만 그것에서 볼 수 있습니다, 열 번호 6 잘 col N ° 2 & 3 – supershivas

,이 같은 자신의 오프셋 클래스를 만들 수 있습니다 12.5 %가 1.5 열 오프셋 행의 폭을 8 분의 1

.col-sm-offset-1point5 { 
    margin-left: 12.5%; 
}

하는 것으로. http://www.bootply.com/1rBTZPGsYu

출처

2014-10-09 16:44:56 DavidG

+ 간단한, 선 솔루션에 비해 하나 중심에 있지 않습니다 – Christina

@Christina Zen? 하하 감사합니다! – DavidG

예, 하나의 스타일에 하나의 클래스가 추가되었습니다. 선은 하나에 대한 모든 것입니다. – Christina

또 다른 방법은 다음과 같습니다 :

Bootply : 이제 (col-sm-offset-1point5와 col-sm-offset-1 교체) 여기

예 두 번째 행의 첫 번째 컬럼에 적용 http://www.bootply.com/NWkWutLI8M

CSS :

.centered{ 
    right: 0; 
    left: 0; 
    margin-left: auto; 
    margin-right: auto; 
    float: none; 
    }

HTML :

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-3"> 
      1 
     </div> 
     <div class="col-sm-3"> 
      2 
     </div> 
     <div class="col-sm-3"> 
      3 
     </div> <!-- close .col --> 
     <div class="col-sm-3"> 
      4 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-9 centered"> 
     <div class="row"> 

      <div class="col-sm-4"> 
       5 
      </div> 
      <div class="col-sm-4"> 
       6 
      </div> 
      <div class="col-sm-4"> 
       7 
      </div> 
     </div>  
     </div> 
    </div> 
</div>

출처

2014-10-09 17:48:27 pbenard

+1 우수함. – Christina

부트 스트랩 : 두 개의 행

답변

관련 문제