https://startbootstrap.com/?showPro=false
模板
超小屏幕 手机 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) |
.col-xs- | .col-sm- | .col-md- | .col-lg- |
什么设备一行都是分为12列
xs-xx的时候,xx占多少列
一行xs等于12列(布满),不等的话左右有空白(自己考虑设计)
<div class="container">
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
<!-- 说明:每row行共12列,分个3div,每个div平占4列,即3个*4列=12列 -->
</div>
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-8">col-md-8</div>
<!-- 说明:每row行共12列,分个2div,第1个div占4列,第2个div则占8列,即4列+8列=12列 -->
</div>
<div class="row">
<div class="col-md-3">col-md-3</div>
<div class="col-md-6">col-md-6</div>
<div class="col-md-3">col-md-3</div>
<!-- 说明:每row行共12列,分个3div,每1,3个div占3列,第2个div则占6列,即3列+6列+3列=12列 -->
</div>
共6个每行2个
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
</div>
共6个每行3个
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
</div>