Bootstrap网格系统基于12列布局，通过.container或.container-fluid与.row组合实现响应式排版，配合xs、sm、md、lg、xl断点类控制不同设备下的列宽与排列。
Bootstrap的网格系统是构建响应式网页的核心工具。它基于12列布局，通过容器、行和列的组合实现灵活的页面排版。关键在于理解其断点划分与类名规则，让内容在不同设备上自动调整排列方式。
掌握容器与行的使用
所有网格内容必须放在.container或.container-fluid中。.container提供固定宽度并居中显示，.container-fluid则是全宽占满屏幕。每一行需要包裹在.row内，行的作用是清除浮动并作为列的直接父元素。
示例：
<div class="container"><div class="row">
<div class="col-6">左侧内容</div>
<div class="col-6">右侧内容</div>
</div>
</div>
理解断点与类前缀
Bootstrap定义了五个响应式断点：xs（.col-sm-、.col-md-等。
立即学习“前端免费学习笔记（深入）”；
不加后缀的.col表示在所有设备上均分宽度；.col-{breakpoint}-{number}指定在特定屏幕尺寸下占据几列。
- 使用.col-md-8 .col-lg-6可以让元素在中屏占8列，大屏占6列
- 省略较小断点类时，会继承较大断点的行为
- 多个断点类可同时使用，适应复杂布局需求
实用响应式技巧
实际开发中常需处理动态内容排列。利用自动布局类.col可让子元素平分剩余空间，无需手动计算列数。配合.d-none .d-md-block这类显示工具，能控制某些元素仅在特定设备显示。
嵌套网格也支持响应式结构：
<div class="row"><div class="col-md-8">
<div class="row">
<div class="col-6">嵌套左</div>
<div class="col-6">嵌套右</div>
</div>
</div>
<div class="col-md-4">侧边栏</div>
</div>
基本上就这些。熟悉类命名规律后，结合浏览器调试工具实时查看效果，能快速搭建出适配手机、平板和桌面的界面结构。关键是合理规划内容优先级，在小屏幕上适当隐藏非核心信息。
