[TOC] ## 布局容器 固定宽度 ``` container { width: 970px; } <div class="container"></div> ``` 100% 宽度 ``` <div class="container-fluid"> </div> ``` ## 栅格系统 - `col-*`本质是左浮动与 with:x%组成,不成屏幕大小使用不同的媒体查询 - `row`是清楚浮动 ``` <div class="container-fluid"> <div class="row"> <!-- 通过设置padding-left设置列内的相对位置--> <div class="col-md-3" style="background-color: #8b3e3e;padding-left: 10px">1</div> <div class="col-md-3" style="background-color: #4673b8;">1</div> <div class="col-md-3" style="background-color: #88ff00;">1</div> <div class="col-md-3" style="background-color: #5f6276;">1</div> </div> </div> ``` ## 媒体查询 ``` /* 小屏幕（平板，大于等于 768px） */ @media (min-width: @screen-sm-min) { ... } /* 中等屏幕（桌面显示器，大于等于 992px） */ @media (min-width: @screen-md-min) { ... } /* 大屏幕（大桌面显示器，大于等于 1200px） */ @media (min-width: @screen-lg-min) { ... } ```