bootstrap网格系统默认为12列，因其可被1、2、3、4、6、12整除，支持常见等分；.col-md-4占1/3、.col-sm-6占1/2、.col-lg-12占满，而.col-md-5无效；非12列需自定义css类或css grid实现。
一、Bootstrap网格系统默认为12列
Bootstrap网格系统基于固定数量的列进行布局划分，其核心设计依赖于数字12的数学特性——可被1、2、3、4、6、12整除，从而支持常见等分场景（如均分2栏、3栏、4栏、6栏）。该列数在Bootstrap 3、4、5中保持一致，且所有预定义类（如.col-md-4）均按12列体系计算宽度比例。
1、.col-md-4表示在中等屏幕及以上占4/12即1/3宽度；
2、.col-sm-6表示在小屏幕及以上占6/12即1/2宽度；
3、.col-lg-12表示在大屏幕及以上占据全部12列宽度；
4、若使用.col-md-5，该类在标准Bootstrap CSS中不存在且无效，因5不是12的因数，无法通过内置类实现精确五等分。
二、自定义非12列布局的替代方案
当需要突破12列限制（如5列、7列、8列等），必须绕过原生栅格类，采用不破坏现有结构的扩展方式。直接修改$grid-columns变量需重新编译Sass源码，而多数项目仅引入CSS文件，故推荐轻量级覆盖方案。
1、定义新CSS类.col-md-5ths，设置width: 20%并清除首项左侧外边距；
2、为避免与原生.col混用导致错位，禁止在同一row内混用.col-md-4与.col-md-5ths；
3、如需响应式变化，须手动添加媒体查询，例如在@media (max-width: 768px)中将grid-template-columns改为repeat(2, 1fr)；
4、对现代浏览器（Chrome 66+、Firefox 63+、Safari 16.4+），直接使用CSS Grid更简洁可控，无需依赖Bootstrap栅格逻辑。
三、Bootstrap布局灵活性优势体现
Bootstrap网格通过断点前缀（xs/sm/md/lg/xl）实现多层响应控制，允许开发者为不同视口宽度指定独立列数，从而在单一HTML结构中适配手机、平板、桌面多种设备。
1、同一元素可设置class="col-xs-12 col-sm-6 col-md-4"，实现从堆叠→两栏→三栏的渐进式展开；
2、.row内部自动应用负外边距抵消.col的左右padding，确保内容区域对齐；
3、配合.container或.container-fluid，可快速切换固定宽度与全宽布局；
4、所有断点类均支持嵌套与组合，无需额外JavaScript干预。
四、Bootstrap布局灵活性局限性
灵活性高度依赖预设断点与12列基数，当需求偏离标准模式时，维护成本上升，且部分行为不可逆或难以调试。
1、row-cols-5仅控制子元素数量，不改变每列实际宽度计算逻辑，与.col-md-*体系不兼容；
2、若项目需支持IE11，CSS Grid方案不可用，必须退回自定义flex类；
3、.col无参数类默认为flex: 1，但与.col-md-6（固定50%）混合时，会导致布局塌陷或溢出；
4、所有.offset-、.push-、.pull-类均按12列百分比硬编码，新增.offset-md-20需手动补全CSS规则。
五、原生CSS Grid作为补充方案
在不放弃Bootstrap整体框架的前提下，可对特定模块启用CSS Grid，规避12列约束，同时保留全局样式一致性。
1、为容器添加class="my-5-col-grid"，并定义display: grid; grid-template-columns: repeat(5, 1fr);；
2、使用gap: 1rem替代Bootstrap的.g-3等间距类；
3、通过grid-column: span 2实现跨列，无需.col-md-8等换算；
4、该方案完全独立于Bootstrap栅格，可并存且互不干扰。
