부트스트랩 4 그리드 스택-수평
부트스트랩 4 그리드 예: 스택에서 수평으로
우리는 더 큰 장치에서 수평이 되기 전에 초소형 장치에서 쌓기 시작하는 기본 그리드 시스템을 만들 것입니다.
다음 예는 간단한 "수평 쌓기" 2열 레이아웃을 보여줍니다. 즉, 자동으로 쌓이는(100%) 초소형 화면을 제외하고 모든 화면에서 50%/50% 분할이 발생합니다.
col-sm-6
col-sm-6
예: 스택에서 수평으로
<div class="container">
<div class="row">
<div class="col-sm-6 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6 bg-warning">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
팁: 클래스 의 숫자 .col-sm-*는 div가 확장되어야 하는 열의 수를 나타냅니다(12개 중). 따라서 .col-sm-11개 열에 .col-sm-4걸쳐, 4개 열에,
.col-sm-66개 열에 걸쳐 있습니다.
참고:
합계가 최대 12개 이하인지 확인합니다(사용 가능한 열 12개를 모두 사용할 필요는 없음).
팁: 클래스를 다음 으로 변경하여 고정 너비 레이아웃을 전체 너비 레이아웃으로 변경할 수 있습니다..container.container-fluid
예: 액체 용기
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
자동 레이아웃 열
부트스트랩 4에는 모든 장치에 대해 동일한 너비의 열을 만드는 쉬운 방법
이 있습니다 . 부트스트랩은 열의 수를 인식하고 각 열의 너비는 동일합니다. 크기 클래스는 열이 응답해야 하는 시기를 결정합니다 ..col-size-*.col-size
<!-- Two columns: 50% width on all screens, except for extra small (100%
width) -->
<div class="row">
<div class="col-sm">1 of
2</div>
<div class="col-sm">2 of 2</div>
</div>
<!-- Four
columns: 25% width on all screens, except for extra small (100% width)-->
<div class="row">
<div class="col-sm">1 of 4</div>
<div class="col-sm">2 of 4</div>
<div class="col-sm">3
of 4</div>
<div class="col-sm">4 of 4</div>
</div>
1/2
2/2
4 중 1
2/4
3/4
4/4