栅格网格系统

/* 超小设备（手机，小于 768px） */@media (min-width: @screen-xs-min) { ... }
/* Bootstrap 中默认情况下没有媒体查询 *//* 小型设备（平板电脑，768px 起） */@media (min-width: @screen-sm-min) { ... }
/* 中型设备（台式电脑，992px 起） */@media (min-width: @screen-md-min) { ... }
/* 大型设备（大台式电脑，1200px 起） */@media (min-width: @screen-lg-min) { ... }

.row；行元素<div class="row"></div>

<div class="row"><!-- 列元素 col-xs-数值:超小设备手机（<768px）  col-sm-数值:小型设备平板电脑（≥768px） col-md-数值：中型设备台式电脑（≥992px）  col-lg-数值 ：大型设备台式电脑--><div class="col-md-4 col-lg-4" style="background-color: deepskyblue;">4</div><div class="col-md-8 col-lg-4" style="background-color: bisque;">8</div></div>

 <!-- 列组合 -->        <div class="row">            <div class="col-md-1" style="background-color: mediumaquamarine;">1</div>            <div class="col-md-1" style="background-color: burlywood;">1</div>            <div class="col-md-1" style="background-color: indianred;">1</div>            <div class="col-md-1" style="background-color: darkturquoise;">1</div>        </div>        <div class="row">            <div class="col-md-6" style="background-color: lightblue;">6</div>            <div class="col-md-6" style="background-color:lightgoldenrodyellow">6</div>        </div>        <div class="row">            <div class="col-md-4" style="background-color:green;">4</div>            <div class="col-md-4" style="background-color:fuchsia;">4</div>            <div class="col-md-4" style="background-color:yellow;">4</div>        </div>        <!-- 列的总数不能超过12 -->        <div class="row">            <div class="col-md-4" style="background-color:burlywood">4</div>            <div class="col-md-4" style="background-color:darkcyan">4</div>            <div class="col-md-5" style="background-color:goldenrod">5</div>        </div>

<!-- 列偏移  使用 .col-md-offset-偏移量    最新版本中只需写成offset-md-4:(4是偏移量))-->        <div class="row">            <div class="col-md-1" style="background-color: mediumaquamarine">1</div>            <div class="col-md-1 offset-md-1" style="background-color: burlywood">1</div>            <div class="col-md-1" style="background-color: indianred">1</div>            <div class="col-md-1 offset-md-8" style="background-color: darkturquoise">1</div>        </div>

<!-- 列排序 --><div class="row">  <div class="col-md-1" style="background-color: rgb(45, 99, 81)">1</div>  <div class="col-md-1 col-md-push-1" style="background-color: rgb(212, 132, 26)">1</div>  <div class="col-md-1" style="background-color: rgb(221, 19, 19)">1</div>  <div class="col-md-1 col-md-pull-1" style="background-color: darkturquoise">1</div>  </div>

 <!-- 列嵌套 -->        <div class="row">            <div class="col-md-6" style="background-color:yellow">                <div class="row">                    <div class="col-md-1" style="background-color: green;">1</div>                    <div class="col-md-9" style="background-color: black;">9</div>                    <div class="col-md-1" style="background-color: blue;">1</div>                    <div class="col-md-1" style="background-color: orange;">1</div>                </div>            </div>            <div class="col-md-6" style="background-color: red;">6</div>        </div>        <hr>        <div class="row">            <div class="col-md-3 col-sm-6" style="background-color: rgb(79, 122, 79);">3</div>            <div class="col-md-3 col-sm-6" style="background-color: rgb(214, 48, 48);">3</div>            <div class="col-md-3 col-sm-6" style="background-color: rgb(127, 127, 156);">3</div>            <div class="col-md-3 col-sm-6" style="background-color: rgb(92, 76, 47);">3</div>        </div>