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

最新推荐文章于 2024-08-21 09:17:03 发布

beizijingzx

最新推荐文章于 2024-08-21 09:17:03 发布

阅读量1.5w

点赞数 1

分类专栏： web前端 bootstrap 文章标签： bootstrap 网格

本文链接：https://blog.csdn.net/beizijingzx/article/details/76080912

版权

本文介绍了Bootstrap框架中的网格系统，包括十二列布局在不同分辨率下的宽度变化，以及如何设置列宽。强调了列必须在行(row)和container内使用，并给出了一段示例代码展示基本用法。作者提醒注意布局结构，避免出现错误，并鼓励通过实践理解并灵活运用。此外，还提及了列偏移等内容，建议参考相关教程深入学习。

摘要由CSDN通过智能技术生成

最近刚刚接触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=