Bootstrap的网格系统是一种强大的工具，用于快速构建响应式布局。它基于12列的模型，允许内容在不同设备上适当地流动和堆叠。要使用网格系统，你需要将内容放在.container内，然后使用.row和.col-*类来定义列。内边距通过负margin在.row上调整，以消除列之间的间隙。预定义的类如.col-xs-4可用于快速创建等宽列。理解这些原则是有效利用Bootstrap网格系统的关键。
Bootstrap 网格系统（Grid System）的工作原理
- （1）行必须放置在
.container class内，以便获得适当的对齐（alignment）和内边距（padding）。 - （2）使用行来创建列的水平组。
- （3）内容应该放置在列内，且唯有列可以是行的直接子元素。
- （4）预定义的网格类，比如
.row和.col-xs-4，可用于快速创建网格布局。LESS混合类可用于更多语义布局。 - （5）列通过内边距（
padding）来创建列内容之间的间隙。该内边距是通过.rows上的外边距（margin）取负，表示第一列和最后一列的行偏移。 - （6）网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个
.col-xs-4
扫一扫
1492
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
