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

最新推荐文章于 2025-07-04 10:02:23 发布

beizijingzx

最新推荐文章于 2025-07-04 10:02:23 发布

阅读量1.5w

点赞数 1

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/beizijingzx/article/details/76080912

web前端同时被 2 个专栏收录

5 篇文章

订阅专栏

bootstrap

1 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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