Blog

Bootstrap 그리드 시스템

January 1, 2014

Bootstrap 그리드 시스템

Bootstrap3 Grid

http://getbootstrap.com/css/#grid 참조.

.col-xs- : Phone ( < 768px )
.col-sm- : Tablets ( ≥768px )
.col-md- : Desktops ( ≥992px )
.col-lg- : Desktops ( ≥1200px)

따라서 Mobile, Tablet, Desktop 을 같이 적용하려면 아래의 예제를 참고

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

References

1 : http://blog.jetstrap.com/2013/08/bootstrap-3-grids-explained/