Bootstrap 3 반응형 그리드 실전

Bootstrap 3 갈아타면서 반응형 그리드 잡아봄. 2에서 올라오면 가장 크게 걸리는게 클래스 이름이 span* → col-md-* 로 바뀐거. 그리고 breakpoint가 xs/sm/md/lg 로 나눠짐.

대충 이런 식으로 만들면 모바일에선 1칼럼, 태블릿 2, 데스크톱 3이 됨.

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-4">카드 1</div>
  <div class="col-xs-12 col-sm-6 col-md-4">카드 2</div>
  <div class="col-xs-12 col-sm-6 col-md-4">카드 3</div>
</div>

주의:

• xs에서 col 안 주면 기본이 block이라 전체 너비 차지. 그걸 의도했으면 빼도 되는데 명시하는게 좋음
• col 합이 12 넘어가면 그 다음 col이 자동으로 다음 줄로 내려감. 행 높이 다르면 여백이 요철처럼 생기는데 .clearfix + visible-* 로 잡거나 equal height 플러그인 써야 함
• 태블릿 두 개 나열하고 PC에서 세 개 할때 3번째에서 .clearfix.visible-sm-block 넣어야 레이아웃 안 깨짐

sm 이하에서 메뉴 접는 네비바는 .navbar-collapse 만 붙이면 자동으로 되는데, 회사 내부 관리자페이지 만들때는 굳이 반응형 안 해도 되는 경우가 많으니 오버엔지니어링 조심.

less 소스 가져다 xs/sm/md/lg 브레이크포인트 숫자만 우리 회사 레이아웃에 맞게 바꿔서 쓰는 중. 기본은 768/992/1200 이지만 우리는 디자인 기준이 990이라 미세조정.