부트스트랩 그리드 - 스택에서 수평으로

부트스트랩 그리드 예: 스택에서 수평으로

우리는 더 큰 장치에서 수평이 되기 전에 초소형 장치에서 쌓기 시작하는 기본 그리드 시스템을 만들 것입니다.

다음 예는 간단한 "수평 쌓기" 2열 레이아웃을 보여줍니다. 즉, 자동으로 쌓이는(100%) 초소형 화면을 제외하고 모든 화면에서 50%/50% 분할이 발생합니다.

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-*는 div가 확장되어야 하는 열의 수를 나타냅니다(12개 중). 따라서 .col-sm-11개 열에 .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>

❮ 이전의 다음 ❯

부트스트랩 3 튜토리얼