• Q&A
  • 회원가입
  • 로그인

[grid] BS4 - Grid Stacked-to-horizontal (BS그리드 수직정렬 → 수평정렬)

61  
목차
  1. BS4 Grid Option (옵션)
  2. .container 클래스 - box형 (= 고정너비)
  3. .container-fluid 클래스 - wide형 (= 전체너비)
  4. Auto Layout Columns (자동 컬럼 너비)

 

BS4 Grid Option (옵션)

  초소형
< 576px 
소형기기
>= 576px 
중형기기
>= 768px 
대형기기
>= 992px 
초대형기기
>= 1200px 
Class 접두어  .col- .col-sm- .col-md-  .col-lg-  .col-xl- 

※ .container (또는, .container-fluid)  >  .row  >  .col~  구조가 되도록 요소 배치.

※ .row (행) 안의 .column (열) 개수 합이 12가 되도록 배치.

※ 분기점 미만 : 수직정렬

※ 분기점 이상 : 수평정렬.

 

.container 클래스 - box형 (= 고정너비)

(sm 미만 수직 정렬) → (sm 이상 box형 6:6 정렬)

 

<div class="container">  

    <div class="row">

        <div class="col-sm-6">col-sm-6</div>

        <div class="col-sm-6">col-sm-6</div>

    </div>

</div>


결과 보기

 

.container-fluid 클래스 - wide형 (= 전체너비)

(sm 미만 수직 정렬) → (sm 이상 width형 6:6 정렬)

 

<div class="container-fluid">

    <div class="row">

        <div class="col-sm-6">col-sm-6</div>

        <div class="col-sm-6">col-sm-6</div>

    </div>

</div>

 

결과 보기

 

Auto Layout Columns (자동 컬럼 너비)

(sm 미만 수직 정렬) → (sm 이상 각 컬럼 너비 자동 12/2 설정)

 

<div class="row">

  <div class="col-sm">1 of 2</div>

  <div class="col-sm">2 of 2</div>

</div>

 

결과보기


(sm 미만 수직 정렬) → (sm 이상 각 컬럼 너비 자동 12/4 설정)


<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>

 

결과보기

PS. 클래스에 붙는 숫자를 제거하면 자동으로 컬럼 개수에 따라 너비 설정됨.



찾아주셔서 감사합니다. Since 2012