您的位置：首页 > Web前端 > BootStrap

关于BootStrap框架中的网格式布局详解，以及消除外边距和container-fluid属性的解释。

2017-07-25 16:13 417 查看

最近刚刚接触bootstrap框架，今天把网格化的不分了解了一下做一个总结。

bootstrap框架将网格分成了十二个列在不同的分辨率下每个列的宽度也不一样，当然同时也提供了相应分辨率下设置列宽的样式。下面会提到。

要想在使用bootstrap框架中的网格，首先其中的列必须要放在行内，也就是class=”row”的div下，而row又必须放在container下，所以大致的使用方式像下面这样：

<div class="container">
<div id="" class="row">
<div id="" class="col-lg-1 col-md-3 col-sm-2 col-xs-4" style="background-color: orange;">
</div>
</div>
</div>

以上代码中的col开头的样式分别代表了大屏幕，中等屏幕，小屏幕，超小屏幕下的样式设置。

注意：必须要放在container下的row下边，否则会出现不可预见的错误。

具体的使用方法我在以下的代码中随便写了几种，方便以后回来查找，其中列的宽度可以随意改变以查看其相应的变化，有写地方也做了相应的注释，代码可以直接考下来运行查看效果。

<body>
网格一：普通的网格，只是根据屏幕的大小设置的列宽度不一样   列宽度为按屏幕从大到小设置
<div class="container">
<div id="" class="row">
<div id="" class="col-lg-1 col-md-3 col-sm-2 col-xs-4" style="background-color: orange;">
col-lg-12 col-md-4 col-sm-6
</div>
<div id="" class="col-lg-2 col-md-2 col-sm-1 col-xs-4" style="background-color: red;">
col-lg-12 col-md-4 col-sm-6
</div>
<div id="" class="col-lg-3 col-md-1 col-sm-3 col-xs-4" style="background-color: black;">
col-lg-12 col-md-4 col-sm-6
</div>
</div>
</div>
网格二：
<div id="" style="width: 500px;">
<!--使用container-fluid样式  可以让以下的div的最大宽度为父节点宽度，若直接使用container则以下的父节点宽度视为响应宽度-->
<div id="" class="container-fluid">
<div id="" class="row">
<div id="" class="col-lg-1 col-md-3 col-sm-2 col-xs-4" style="background-color: orange;">
col-lg-12 col-md-4 col-sm-6
</div>
<div id="" class="col-lg-2 col-md-2 col-sm-1 col-xs-4" style="background-color: red;">
col-lg-12 col-md-4 col-sm-6
</div>
<div id="" class="col-lg-3 col-md-1 col-sm-3 col-xs-4" style="background-color: black;">
col-lg-12 col-md-4 col-sm-6
</div>

</div>

</div>

</div>

网格三   列中嵌套：在列中嵌套时   如果要根据父列宽度进行网格化  也应该加上container-fluid样式   道理参考网格二中的注释
<div id="" class="container">
<div id="" class="row" >
<div id="" class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="background-color: orange;">
<div id="" class="container-fluid" style="margin: 0; padding: 0;">
<div id="" class="row" >
<div id="" class="col-lg-4 col-md-4 col-sm-4 col-xs-4" style="background-color: red; padding-right: 10px;">
sdfdsfdsfsdf
</div>

<div id="" class="col-lg-4 col-md-4 col-sm-4 col-xs-4" style="background-color: green;padding-right: 10px;">
sdfsdfds
</div>
<div id="" class="col-lg-4 col-md-4 col-sm-4 col-xs-4" style="background-color: purple; padding-right: 10px;">
sdfsdfds
</div>
</div>
</div>
a089
;
</div>
<div id="" class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="background-color: red;">
style="background-color: red;"
</div>
</div>

</div>

<!--网格三中的嵌套布局中发现会有一定的外边距可以通过设置嵌套列的container的 padding 等于 0 来消除外边距。-->

</body>

网格式布局并不是很难，重点是理解，而且要根据实际的效果去理解，这样才可以熟悉并且灵活的使用，今天也只是写了一些简单的东西，还有列偏移之类的可以参考[(]http://www.runoob.com/bootstrap/bootstrap-grid-system.html)]，在此就不一一列出。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： bootstrap 网格

相关文章推荐

新的分享

章节导航