Head
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>Body
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-3">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-xs-6 col-sm-3">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-3">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-xs-6 col-sm-3">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
</div>
</div>설명
| 화면너비 | 768px 미만 | 768px 이상 | 992px 이상 | 1200px 이상 |
| 그리드 배열 | 항상 가로배열 | 가로 배열에서 위 수치에 이르면 세로 배열로 전환 | ||
| .container 너비 | 없음 (항상 화면 전체너비) |
750px | 970px | 1170px |
| 클래스 선택자 접두어 | .col-xs- (xs: extra small) |
.col-sm- (sm: small) |
.col-md- (md: medium) |
.col-lg- (lg: large) |
| 거터(그리드 사이 여백) 크기 |
30px, 그리드 좌우측 15px 패딩 | |||
이 예제에서는 모든 컬럼이 .col-xs-6와 .col-sm-3 그리드 선택자를 사용하고 있습니다.
따라서, 768px 이상의 너비에서는 모두 좌우로 배열이 되지만, .col-xs-6 선택자 때문에 768px 미만의 너비에서는 2행 2열의 그리드가 배열돼야 하나 두 번째 그리드의 콘텐츠가 적기 때문에 세 번째 그리드가 두 번째 그리드의 아래에 배치됩니다.
<div class=”clearfix visible-xs-block“></div>
이를 해결하기 위해 두 번째 바로 아래에 .clearfix .visible-xs-block 선택자가 있는 div 태그를 배치합니다.
.clearfix 선택자는 플로트 되고 있는 요소에 clear:both; 속성을 추가하는 역할을 하며, .visual-xs-block은 반응형 선택자 편에서 살펴보겠지만 768px 미만의 사이즈에서 이 선택자가 있는 요소에 display:block; 속성을 추가하는 역을을 하므로 이 요소를 기준으로 플로트 되고 있는 요소를 상하로 분리합니다.
컬럼 리셋을 사용하지 않으면 아래 그림처럼 그리드가 깨지게 됩니다.
실행
댓글