부트스트랩 그리드 480px 분기

1 개요[ | ]

Bootstrap grid breakpoint for 480px
부트스트랩 그리드 480px 분기[1]
가장 좁은 기준이 적용되는 col-xs 클래스를 사용했을 때 그렇다.
  • 480px 분기에 대한 요구가 많지만 반영될 가능성은 적어보인다.
  • CSS 설정에 따라 480px 분기로 변경 가능하다.
또한 스마트폰의 해상도는 480px도 크지만 device-width에 따라 한줄로 표시된다.

2 방법 1: bootstrap 커스터마이즈[ | ]

3 방법 2: CDN 사용 + 스타일 추가[ | ]

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<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>
[class*=col-]{padding:8px;background:silver;border:1px solid gray;text-align:center}.col-ms-1,.col-ms-10,.col-ms-11,.col-ms-12,.col-ms-2,.col-ms-3,.col-ms-4,.col-ms-5,.col-ms-6,.col-ms-7,.col-ms-8,.col-ms-9{position:relative;min-height:1px;padding-left:15px;padding-right:15px}
@media (min-width:480px){.col-ms-1,.col-ms-10,.col-ms-11,.col-ms-2,.col-ms-3,.col-ms-4,.col-ms-5,.col-ms-6,.col-ms-7,.col-ms-8,.col-ms-9{float:left}.col-ms-1{width:8.33333%}.col-ms-2{width:16.66667%}.col-ms-3{width:25%}.col-ms-4{width:33.33333%}.col-ms-5{width:41.66667%}.col-ms-6{width:50%}.col-ms-7{width:58.33333%}.col-ms-8{width:66.66667%}.col-ms-9{width:75%}.col-ms-10{width:83.33333%}.col-ms-11{width:91.66667%}.col-ms-12{width:100%}.col-ms-push-1{left:8.33333%}.col-ms-push-2{left:16.66667%}.col-ms-push-3{left:25%}.col-ms-push-4{left:33.33333%}.col-ms-push-5{left:41.66667%}.col-ms-push-6{left:50%}.col-ms-push-7{left:58.33333%}.col-ms-push-8{left:66.66667%}.col-ms-push-9{left:75%}.col-ms-push-10{left:83.33333%}.col-ms-push-11{left:91.66667%}.col-ms-pull-1{right:8.33333%}.col-ms-pull-2{right:16.66667%}.col-ms-pull-3{right:25%}.col-ms-pull-4{right:33.33333%}.col-ms-pull-5{right:41.66667%}.col-ms-pull-6{right:50%}.col-ms-pull-7{right:58.33333%}.col-ms-pull-8{right:66.66667%}.col-ms-pull-9{right:75%}.col-ms-pull-10{right:83.33333%}.col-ms-pull-11{right:91.66667%}.col-ms-offset-1{margin-left:8.33333%}.col-ms-offset-2{margin-left:16.66667%}.col-ms-offset-3{margin-left:25%}.col-ms-offset-4{margin-left:33.33333%}.col-ms-offset-5{margin-left:41.66667%}.col-ms-offset-6{margin-left:50%}.col-ms-offset-7{margin-left:58.33333%}.col-ms-offset-8{margin-left:66.66667%}.col-ms-offset-9{margin-left:75%}.col-ms-offset-10{margin-left:83.33333%}.col-ms-offset-11{margin-left:91.66667%}}
@media (min-width:480px){.form-horizontal .form-group .control-label{text-align:right}}
</style>

<div class='row'>
  <div class='col-ms-1'>너비1</div>
  <div class='col-ms-1'>너비1</div>
  <div class='col-ms-1'>너비1</div>
  <div class='col-ms-1'>너비1</div>
  <div class='col-ms-1'>너비1</div>
  <div class='col-ms-1'>너비1</div>
  <div class='col-ms-1'>너비1</div>
  <div class='col-ms-1'>너비1</div>
  <div class='col-ms-1'>너비1</div>
  <div class='col-ms-1'>너비1</div>
  <div class='col-ms-1'>너비1</div>
  <div class='col-ms-1'>너비1</div>
</div>

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

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

<div class='row'>
  <div class='col-ms-6'>너비6</div>
  <div class='col-ms-6'>너비6</div>
</div>

<div class='row'>
  <div class='col-ms-12'>너비12</div>
</div>

4 같이 보기[ | ]

5 주석[ | ]

  1. breakpoint는 흔히 중단점으로 번역되는데, 여기서는 의미상 "분기점"이 적절

6 참고[ | ]

문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}