bootstrap栅格布局，css栅格布局

编程之家2026-06-291112次浏览

大家好，今天小编来为大家解答bootstrap栅格布局这个问题，css栅格布局很多人还不知道，现在让我们一起来看看吧！

Bootstrap 栅格布局的使用

bootstrap提供了一套非常强大的系统——响应式、移动设备优先的栅格系统。它可以随着设备或者视口的尺寸大小的增加而适当的扩展列数（最多到12列）。

在使用栅格参数时，需要注意：例如当定义了.col-md-1时，代表宽度大于 992px时，这一列将会占用 1/12的宽度，如果没有定义更大的类.col-lg，那当显示器大于 1200px时，排列的宽度仍会按照 col-md-1来分配。但是，如果没有定义更小的类，当前元素将会失去栅格的样式，变成一个普通的div（没有浮动、也没有宽度，默认占满一整行）。

由于 bootstrap 3的栅格布局是通过浮动来实现的，所以当我们一行中有一块未占满一整行，但又需要进行偏移或者居中的元素，就没法通过 marin: 0 auto或者 text-align: center，这时就可以使用列偏移来让该列进行偏移。

要进行列偏移，需要在对应的列中添加 col-md-offset-x

偏移完成后，我们会发现， bootstrap偏移的原理是通过 margin-left来实现的，所以 col-md-8后面的与纳素，也会跟着一起被推开。当偏移量加元素本身的宽度大于12列时，会导致后面的元素进行换行。另外，由于偏移是固定使用 margin-left属性，所以偏移只能向右偏移。

列排序，就是可以将列的显示顺序进行替换。但列排序和列偏移有点不同，就是列偏移是通过 margin-left来实现的，但是列排序却是通过相对定位来实现的。所以列排序它不会影响到周围元素的布局（会导致元素之间的重叠）。

要实现列排序，只需要通过 col-md-pull或者 col-md-push来进行左偏移和右偏移。

</div></pre>

什么是bootstrap栅格系统

什么是栅格系统

栅格系统是指，将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。

Bootstrap的栅格系统采用了1-12列的模式，并且通过比例计算来设置你定义的列宽。

例如你这一行想要采用两列的布局模式，那么每列的宽度都为外容器的50%，不管你用什么设备浏览，它都会采用这样的比例进行展示。

不过如果当设备宽度小于你设定的最小宽度，那么这两列就会并排成为一列。

Bootstrap的栅格系统

在Bootstrap中使用栅格系统非常简单方便，只需要在你的div中引入它们已经定义好的类即可。

我们先看看Bootstrap有几种栅格类可以使用：

1..col-xs-*这是超小屏幕类（<768px），类似手机等设备。

2..col-sm-*这是小屏幕设备类（≥768px且<992px），类似平板设备。

3..col-md-*这是中型设备类（≥992px且<1200px）。

4..col-lg-*这是大型设备类（≥1200px）。

如何使用Bootstrap栅格系统

你可以通过使用这些对应设备的栅格类来决定自己应用在不同设备上的布局样式。

例如：<div class="col-xs-6 col-md-12"></div><div class="col-xs-6 col-md-12"></div>这种编码的结果就是，这两个div在pc端浏览起来是两行（每行都占据12列栅格），而在手机端浏览器来是一行两列（每列占据6列栅格）。

通过这种形式，就能很方便地使用栅格系统定制自己的应用布局了。

其他信息

除了以上的使用方法之外，还能使用“列偏移类”来快速对自己的栅格进行定位，使用方法类似<div

class=".col-md-8.col-md-offset-3"></div>按照这样的写法，这个div就会在pc端向右偏移 3列。

Bootstrap栅格化系统设计原理

栅格实现原理

•把网页总宽度平分为12分，开发人员可以自由按分组合，以便开发出简洁方便的程序

•仅仅通过定义容器大小、平分12分，再调整内外边距，最后结合媒体查询，就制作出强大的响应式栅格系统

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

下面就介绍一下 Bootstrap栅格系统的工作原理：

•“行（row）”必须包含在.container（固定宽度）或.container-fluid（100%宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。

•通过“行（row）”在水平方向创建一组“列（column）”。

•你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。

•类似.row和.col-xs-4这种预定义的类，可以用来快速创建栅格布局。Bootstrap源码中定义的 mixin也可以用来创建语义化的布局。

•通过为“列（column）”设置 padding属性，从而创建列与列之间的间隔（gutter）。通过为.row元素设置负值 margin从而抵消掉为.container元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。

•负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。

•栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个.col-xs-4来创建。

•如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。

栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何.col-md-*栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何.col-lg-*不存在，也影响大屏幕设备。

（原理：把我们的屏幕大小的宽度平分成12个格，每一格的宽度和整个屏幕分辨率是有关系的，如果整个屏幕分辨率越大那么这12格的每一格的宽度就大，是按比例来算出的，而且这12格的layout是水平排列的。）

比如，我们定义一个div，我们不指定这个div的宽度是多少像素或者占多少百分比，我们是指定这个div占12格中的几格，我们这个div占12格中的8格，不同的分辨率底下它始终是占12格中的8格。系统会根据屏幕分辨率的大小，自动拆成12格，每一格大小根据屏幕分辨率自动在变。这样的话在各浏览器或分辨率下都可以兼容我们这个8:4这个比例。

好了，文章到这里就结束啦，如果本次分享的bootstrap栅格布局和css栅格布局问题对您有所帮助，还望关注下本站哦！

c语言中文网免费版 n在c语言中怎么用财务报表自动生成软件(excel自动生成现金流量表模板)