在使用bootstrap开发页面时，栅格布局是最常用的排版方式，核心依赖container、row、col三个类配合实现响应式布局。但实际开发中经常会出现布局不生效的问题，下面从常见原因和解决方法两方面展开说明。
一、常见不生效原因及调整方法
1. bootstrap文件未正确引入
这是最基础也最容易忽略的问题，如果只引入了bootstrap的js文件没有引入css文件，或者css文件路径错误，栅格相关的样式都不会生效。需要检查引入的bootstrap CSS文件是否加载成功，可通过浏览器开发者工具的Network面板查看。
正确的引入方式示例：
<!-- 引入bootstrap CSS文件 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"> <!-- 如果需要使用js相关组件再引入js文件 --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
2. 类使用顺序不符合规范
bootstrap栅格布局有严格的嵌套规则：外层必须是container或container-fluid类作为容器，内部直接子元素必须是row类，row的直接子元素必须是col-*类，不能跳过层级或者嵌套错误。
错误示例：
<!-- 错误：row直接放在body下，没有外层container --> <div class="row"> <div class="col-6">左侧内容</div> <div class="col-6">右侧内容</div> </div>
正确示例：
<div class="container">
<div class="row">
<div class="col-6">左侧内容</div>
<div class="col-6">右侧内容</div>
</div>
</div>
3. 自定义样式覆盖了栅格样式
如果自己写的CSS样式中，对container、row、col类或者它们的子元素设置了宽度、内边距、外边距等属性，可能会覆盖bootstrap默认的栅格样式，导致布局异常。
可以通过浏览器开发者工具选中对应的元素，查看样式优先级，调整自定义样式的选择器权重，或者避免直接修改栅格类的核心属性。如果需要调整间距，可以使用bootstrap自带的间距工具类，比如g-3设置row的栅格间隙，p-2设置内边距。
4. col类的响应式规则使用错误
bootstrap的col类支持不同屏幕尺寸的适配，比如col-sm-6表示小屏幕及以上占6份，col-md-4表示中等屏幕及以上占4份。如果只写了col没有指定份数，或者响应式前缀写错，也会导致布局不符合预期。
正确的响应式col使用示例：
<div class="container">
<div class="row">
<!-- 超小屏幕占12份，小屏幕占6份，中等屏幕及以上占4份 -->
<div class="col-12 col-sm-6 col-md-4">内容块1</div>
<div class="col-12 col-sm-6 col-md-4">内容块2</div>
<div class="col-12 col-sm-6 col-md-4">内容块3</div>
</div>
</div>
二、栅格布局核心规则总结
为了确保栅格布局正常生效，需要牢记以下核心规则：
- 容器类
container有固定的最大宽度，container-fluid宽度始终为100%，按需选择 row类默认有负外边距，用来抵消col类的内边距，不要随意修改row的margin属性col类的直接父元素必须是row，不能跨层级嵌套- 一行的总份数默认是12份，超过12份会自动换行，可根据需求调整份数
如果按照以上规则检查后布局仍然不生效，可以打开浏览器开发者工具，逐层查看元素的样式计算情况，定位具体被覆盖或者未生效的样式属性，针对性调整即可。