Bootstrap 그리드 예 : 누적 된-에 수평
우리는 밖으로 데스크톱 (중 / 대형 장치)에 수평이되기 전에, 모바일 / 태블릿 (소형 장치)에 적층 시작 기본 그리드 시스템을 만들 것입니다.
다음의 예는 자동으로 100 % 적재 할 여분의 작은 화면을 제외하고, 모든 화면에 50 % / 50 % 분할 될 것이다 의미 간단한 "적층 투 수평"개의 열 레이아웃을 나타낸다 :
COL-SM-6
COL-SM-6
예 : 스택 - 투 - 수평
<div class="container">
<h1>Hello World!</h1>
<div
class="row">
<div class="col-sm-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div> »그것을 자신을 시도 팁 :의 숫자 .col-sm-* 클래스는 사업부가 (12)의 개에 걸쳐있는 방법을 많은 열을 나타냅니다. 그래서, .col-sm-1 스팬 1 열, .col-sm-4 스팬 4 열, .col-sm-6 등 스팬 6 열,
주 : 합계가 항상 12까지 추가 있는지 확인하십시오!
팁 : 당신은 변경하여 전체 폭 레이아웃으로 어떤 고정 폭 레이아웃을 설정할 수 있습니다 .container 하는 클래스를 .container-fluid :
예 : 유체 용기
<div class="container-fluid">
<h1>Hello
World!</h1>
<div class="row">
<div
class="col-sm-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div> »그것을 자신을 시도