简单使用栅格:
<body>
<div class="container">
<!-- 栅格系统:行和列的布局,网格状布局 -->
<!-- 行:row -->
<!-- container 默认有15px的左右内间距
row 填充父容器的15PX左右的间距
margin-left margin-right 设置为 -15px -->
<div class="row">
<!-- 列:col-*-* 星号代表不确定(传参) -->
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
</div>
<!-- <div class="myRow"></div> -->
</div>
</body>
响应式使用栅格:
<body>
<!--
大屏设备 让div平均分成6等份
中屏设备 让div平均分成4等份
小屏设备 让div平均分成3等份
超小屏设 让div平均分成2等份
-->
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 "></div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 "></div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 "></div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 "></div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 "></div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 "></div>
</div>
</div>
</body>
隐藏栅格:
<body>
<!--
大屏设备 显示
中屏设备 隐藏
小屏设备 显示
超小屏设 隐藏
visible-lg 大屏生效其他隐藏
visible-md 中屏生效其他隐藏
visible-sm 小屏生效其他隐藏
visible-xs 超小屏生效其他隐藏
hidden-lg 大屏生效其他隐藏
hidden-md 中屏生效其他隐藏
hidden-sm 小屏生效其他隐藏
hidden-xs 超小屏生效其他隐藏
3.2版本以后建议使用hidden
-->
<div class="box visible-lg visible-sm">
吃葡萄不吐葡萄皮
</div>
</body>