부트스트랩 3단 분할

Jmnote bot (토론 | 기여)님의 2020년 11월 2일 (월) 02:52 판 (봇: 자동으로 텍스트 교체 (-</source> +</syntaxhighlight>, -<source +<syntaxhighlight ))
(차이) ← 이전 판 | 최신판 (차이) | 다음 판 → (차이)
Bootstrap 3 columns
부트스트랩 3단 분할

1 예시[ | ]

html
Copy
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/latest/js/bootstrap.min.js"></script>

<style>
.row>div { text-align: center; border: 1px solid gray; }
.row>div:nth-child(3n+1) { background: orange; }
.row>div:nth-child(3n+2) { background: yellow; }
.row>div:nth-child(3n+3) { background: lightgreen; }
</style>

<div class='row'>
  <div class='col-sm-4'>너비4</div>
  <div class='col-sm-4'>너비4</div>
  <div class='col-sm-4'>너비4</div>
</div>

<div class='row'>
  <div class='col-sm-6'>너비6</div>
  <div class='col-sm-4'>너비4</div>
  <div class='col-sm-2'>너비2</div>
</div>

<div class='row'>
  <div class='col-sm-2'>너비2</div>
  <div class='col-sm-8'>너비8</div>
  <div class='col-sm-2'>너비2</div>
</div>

<div class='row'>
  <div class='col-sm-10'>너비10</div>
  <div class='col-sm-1'>너비1</div>
  <div class='col-sm-1'>너비1</div>
</div>
→ 화면 너비가 넓으면 3단, 좁으면 1단으로 보임

2 같이 보기[ | ]