Bootstrap的栅格系统是什么？栅格系统详解-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

本篇文章就给大家带来Bootstrap的栅格系统是什么？栅格系统详解，让大家了解Bootstrap栅格系统、栅格参数是什么，列偏移、列嵌套怎么设置。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。如果大家想要学习和获取更多的bootstrap相关视频教程也可以访问：bootstrap教程！

什么是栅格系统？

Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。

栅格系统用于通过一系列的行（row）与列（col）的组合来创建页面布局，内容就可以放入这些创建好的布局中

注意：

”行（row）“ 必须包含在 .container (固定宽度) 或 .container-fluid(100%宽度)中。

<p class="container">
    <p class="row">   
        <p class="col-md-3">我是文本</p>
        <p class="col-md-3">我是文本</p>
        <p class="col-md-3">我是文本</p>
        <p class="col-md-3">我是文本</p>
    </p>
</p>

表示一个 p 占3列。

栅格参数

	超小屏幕手机 (<768px)	小屏幕平板 (≥768px)	中等屏幕桌面显示器 (≥992px)	大屏幕大桌面显示器 (≥1200px)
栅格系统行为	总是水平排列	开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
`.container` 最大宽度	None （自动）	750px	970px	1170px
类前缀	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
列（column）数	12
最大列（column）宽	自动	~62px	~81px	~97px
槽（gutter）宽	30px （每列左右均有 15px）
可嵌套	是
偏移（Offsets）	是
列排序	是

现在有一个需求：

如果是大屏幕，一行显示6列

如果是中屏幕，一行显示4列

如果是小屏幕，一行显示3列

如果是超小屏幕，一行显2列

<p class="container">
    <p class="row">   
        <p class="col-lg-2 col-md-3 col-sm-4 col-xs-6">我是文本</p>
        <p class="col-lg-2 col-md-3 col-sm-4 col-xs-6">我是文本</p>
        <p class="col-lg-2 col-md-3 col-sm-4 col-xs-6">我是文本</p>
        <p class="col-lg-2 col-md-3 col-sm-4 col-xs-6">我是文本</p>
        <p class="col-lg-2 col-md-3 col-sm-4 col-xs-6">我是文本</p>
        <p class="col-lg-2 col-md-3 col-sm-4 col-xs-6">我是文本</p>
    </p>
</p>

列偏移

.col-lg-offset-*

" * " 偏移几个位置

<p class="container">
    <p class="row">   
        <p class="col-lg-2 col-lg-2">我是文本</p>
    </p>
</p>

在大屏幕的页面下偏移两个格子

列嵌套

<p class="container">
    <p class="row">   
        <p class="col-lg-5">
            <p class="row">
                <p class="col-lg-2">我是文本</p>
                <p class="col-lg-2">我是文本</p>
            </p>
        </p>
    </p>
</p>