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이라 미세조정.
