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

[grid] BS4 - Grid Extra Small (BS그리드 초소형기기) - .col-숫자, .col 클래스

56  
목차
  1. 수동 너비
  2. 자동 너비

 

※ .col-숫자.col 클래스 경우, 모든 너비에 적용.

 

수동 너비

[3:9 비율]

 

<div class="container-fluid">

  <div class="row">

    <div class="col-3 bg-success">...</div>

    <div class="col-9 bg-warning">...</div>

  </div>

</div>

 

결과보기


[4:8 비율]

 

<div class="container-fluid">

  <div class="row">

    <div class="col-4 bg-success">...</div>

    <div class="col-8 bg-warning">...</div>

  </div>

</div>

 

결과보기


[6:6 비율]

 

<div class="container-fluid">

  <div class="row">

    <div class="col-6 bg-success">...</div>

    <div class="col-6 bg-warning">...</div>

  </div>

</div>

 

결과보기

 

자동 너비

각 컬럼 너비 (12/2 = 6 차지)

 

<div class="row">

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

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

</div>

 

결과보기


각 컬럼 너비 (12/4 = 3 차지)

 

<div class="row">

  <div class="col">1 of 4</div>

  <div class="col">2 of 4</div>

  <div class="col">3 of 4</div>

  <div class="col">4 of 4</div>

</div>

 

결과보기



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