트위터 부트 스트랩 그리드 :

Question

아래 표시된 것처럼 그리드를 달성하고자 :

내가 트위터 부트 스트랩 그리드 시스템을 찾고있다,하지만이 행을 지향하기 때문에, 내가 볼 수 없습니다 이것을 달성하는 방법.

방법이 없나요? 아니면 수동으로 CSS를 사용해야합니까?

Answer 1

당신은 여전히 ​​일부 사용자 지정 스타일 부트 스트랩 그리드 사용할 수 있습니다

.block { 
 
    border: 3px #222 solid; 
 
    padding: 10px; 
 
    margin-bottom: 10px; 
 
} 
 
.block-1 { 
 
    height: 100px; 
 
} 
 
.block-2 { 
 
    height: 50px; 
 
} 
 
.block-3 { 
 
    height: 50px; 
 
} 
 
.block-4 { 
 
    height: 100px; 
 
}

<link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-xs-8"> 
 
      <div class="block block-1">Block 1</div> 
 
      <div class="block block-2">Block 2</div> 
 
     </div> 
 
     <div class="col-xs-4"> 
 
      <div class="block block-3">Block 3</div> 
 
      <div class="block block-4">Block 4</div> 
 
     </div> 
 
    </div> 
 
</div>

을

Answer 2

중첩 할 수의 행과 COLS :

<div class="row"> 
    <div class="col-md-9"> 
    <div class="row"> 
     <div class="col-md-12">left top</div> 
     <div class="col-md-12">left bottom</div>  
    </div> 
    </div> 
    <div class="col-md-3"> 
    <div class="row"> 
     <div class="col-md-12">right top</div> 
     <div class="col-md-12">right bottom</div>  
    </div> 
    </div> 
</div> 

는 "중첩 열"에서 http://getbootstrap.com/css/#grid를 참조

Answer 3

바로 설정 이 부모는 더 약 Grid system을 읽어 어린이

main{padding: 20px} 
 
section, article{display: inline} 
 
article, div{border: 4px solid black; margin-bottom: 10px} 
 
article:nth-child(1){height: 80px} 
 
article:nth-child(2){height: 40px} 
 
div:nth-child(1){height: 30px} 
 
div:nth-child(2){height: 90px}

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
 
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 
<main class=row> 
 
    <section class="col-xs-8"> 
 
    <article></article> 
 
    <article></article> 
 
    </section> 
 
    <aside class="col-xs-4"> 
 
    <div></div> 
 
    <div></div> 
 
    </aside> 
 
</main>

와 col-xs-* 폭입니다.