1.实现原理网格系统的实现原理很简单。只需定义容器大小，将其分成12份(也有24或32份，但12份最常见)，然后调整内外边距，最后结合媒体查询，就制成了一个功能强大的响应式网格系统。 Bootstrap框架中的网格系统将容器分为12个部分。 & ltdiv class="row " >& ltdiv class="col-md-1 " >。col-md-1</div & gt；& ltdiv class="col-md-1 " >。col-md-1</div & gt；& ltdiv class="col-md-1 " >。col-md-1</div & gt；& ltdiv class="col-md-1 " >。col-md-1</div & gt；& ltdiv class="col-md-1 " >。col-md-1</div & gt；& ltdiv class="col-md-1 " >。col-md-1</div & gt；& ltdiv class="col-md-1 " >。col-md-1</div & gt；& ltdiv class="col-md-1 " >。col-md-1</div & gt；& ltdiv class="col-md-1 " >。col-md-1</div & gt；& ltdiv class="col-md-1 " >。col-md-1</div & gt；& ltdiv class="col-md-1 " >。col-md-1</div & gt；& ltdiv class="col-md-1 " >。col-md-1</div & gt；& lt/div & gt；2.工作原理数据行(。行)必须包含在容器(。容器)，以便给它一个适当的对齐和填充。 您可以添加列(。列)中。行)，但是列的总和不能超过平均划分的列总数，例如12。 内容应该放在列容器(。列)，并且只有列(。列)可以是行容器(。排)。 设置填充会创建列之间的间距。 然后，为第一列和最后一列设置负边距，以抵消填充的影响。 Image简单解释一下图:最外面的边框，有一大片白色区域，相当于浏览器的可视区域。 Bootstrap框架的网格系统中有一个响应式效果，有四种类型的浏览器(超小屏、小屏、中屏、大屏幕)，其断点(像素的分界点)分别为768px、992px、1220px。 第二个边框(1)相当于一个容器(。容器) 根据浏览器分辨率不同，其宽度也不同:自动、750px、970px、1170px。 2号水平条表示该行(。行)被分成12个相等的部分，即列。 每列都有一个左填充:15px(图中的粉红色部分)和一个右填充:15px(图中的紫色部分)。 这也导致第一列的左填充和最后一列的右填充占据了总宽度的30px，使得页面不美观。当然，如果你需要留一定的间距，这是一个很好的做法。 第3栏是行容器(。row)，它定义了-15px的左边距和右边距值，这些值用于偏移第一列的左内距离和最后一列的右内距离。 通过组合行和列，可以看到水平栏4的效果。 也就是我们期望看到的效果。第一列和最后一列与容器(。容器)。 横条5只是想告诉你，你可以根据需要组合列与列，但是它们的组合之和不能超过列的总数。 官方解释:通过设置“列(。column)”，创建列之间的装订线。 为设置负边距。元素的填充集进行偏移。容器元素，该元素间接偏移“列(.列)”包含在“行(。行)" 3.基本用法网格系统用于布局，实际上是列的组合。 Bootstrap框架在网格系统中有四种基本用途。 图像列合并简单理解为改变数字合并列(规则:列总数不能超过12)，有点类似于表格的colspan属性。 & ltdiv class="container " >& ltdiv class="row " >& ltdiv class="col-md-4 " >。col-md-4</div & gt；& ltdiv class="col-md-8 " >。col-md-8</div & gt；& lt/div & gt；& ltdiv class="row " >& ltdiv class="col-md-4 " >。col-md-4</div & gt；& ltdiv class="col-md-4 " >。col-md-4</div & gt；& ltdiv class="col-md-4 " >。col-md-4</div & gt；& lt/div & gt；& ltdiv class="row " >& ltdiv class="col-md-3 " >。col-md-3</div & gt；& ltdiv class="col-md-6 " >。col-md-6</div & gt；& ltdiv class="col-md-3 " >。col-md-3</div & gt；& lt/div & gt；& lt/div & gt；实现列组合的方式很简单，只涉及两个CSS特性:浮动和宽度百分比。 4.列偏移有时，我们不希望两个相邻的列靠得很近，但我们也不想用边距或其他技术手段来 此时，可以使用列偏移功能。 使用列偏移量也很简单。只要您想要将类名col-md-offset-*(其中星号表示要偏移的列组合的数量)添加到column元素中，具有该类名的列就会向右偏移。 例如，如果将col-md-offset-4添加到列元素，则意味着该列将向右移动4列。 实现原理非常简单，就是使用十二分之一(1/12)的左边距。 那么偏移量就和左边距一样多。 但是，要注意一个细节。当使用col-md-offset-*将列向右偏移时，请确保列和偏移列的总数不超过12，否则，列将以虚线显示。 & ltdiv class="container " >& ltdiv class="row " >& ltdiv class="col-md-4 " >。col-md-4</div & gt；& ltdiv class = " col-MD-2 col-MD-offset-4 " >列向右移动四列 2)第一列网格占2个网格宽，无偏移。 3)第二列和第三列中的网格宽度为2个网格，偏移1个网格。 4)第四列网格宽3个网格，偏移1个网格。 & ltdiv class="row " >& ltdiv class="col-md-2 " >。col-md-2</div & gt；& ltdiv class = " col-MD-2 col-MD-offset-1 " >col-MD-2 col-MD-offset-1 & lt；/div & gt；& ltdiv class = " col-MD-2 col-MD-offset-1 " >col-MD-2 col-MD-offset-1 & lt；/div & gt；& ltdiv class = " col-MD-3 col-MD-offset-1 " >col-MD-3 col-MD-offset-1 & lt；/div & gt；& lt/div & gt；5、列排序列排序其实就是改变列的方向，也就是改变左右浮动，设置浮动距离。 在Bootstrap框架的网格系统中，通过添加类名col-md-push-*和col-md-pull-*(其中星号表示移动的列组合的数量)来完成 6.嵌套列。Bootstrap框架的网格系统也支持列的嵌套。 您可以添加一行或多行(。row)容器添加到列中，然后将列插入到该行容器中(如上所述使用列)。 但是，行容器的宽度(。row)为100%，这是当前外部列的宽度。 嵌套列的总数也不应超过12列。 否则会导致最后一行换行。 附录阅读参考:https://blog.mazey.net/1959.html