Bootstrap 그리드 예 : 소형 장치
우리가 두 개의 열이있는 간단한 레이아웃을 가정합니다. 우리는 열을 분할하려면 25%/75% 작은 장치를.
팁 : 작은 장치가 991 픽셀 768 픽셀의 화면 폭을 갖는 것으로 정의된다.
소형 기기 위해 우리는 사용 .col-sm-* 클래스를.
우리는 우리의 두 컬럼에 다음과 같은 클래스를 추가합니다 :
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>이제 Bootstrap "작은 크기와 종류를 찾아 말할 것입니다 -sm- 그들과 그 사용"을 참조하십시오.
다음의 예는 발생합니다 25%/75% 작은 (중형 및 대형) 장치에 분할. 매우 작은 장치에서 자동으로 (100 %) 스택합니다 :
COL-SM-3
COL-SM-9
예
<div class="container-fluid">
<h1>Hello World!</h1>
<div
class="row">
<div class="col-sm-3" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div> »그것을 자신을 시도 주 : 합계가 항상 12까지 추가되었는지 확인합니다.
33.3 % / 66.6 % 분할의 경우 사용합니다 .col-sm-4 및 .col-sm-8 :
COL-SM-4
COL-SM-8
예
<div class="container-fluid">
<h1>Hello World!</h1>
<div
class="row">
<div class="col-sm-4" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-8" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div> »그것을 자신을 시도 다음 장에서는 매체 장치에 대해 다른 분할 퍼센트를 추가하는 방법을 보여줍니다.