Bootstrap响应式列创建失败求助：无法实现指定屏幕布局

你的代码逻辑本身是正确的，col-lg-2（大屏每行6列）、col-md-3（中屏每行4列）、col-sm-12（小屏每行1列）的类名搭配完全符合Bootstrap栅格规则。大屏和中屏未达预期效果，大概率是以下两个原因：

• 列容器为空，无内容导致高度为0，视觉上无法呈现布局效果
• 未正确引入Bootstrap的CSS文件

修正后的代码示例 #

给列添加占位内容并设置内边距，确保容器有可见高度：

<div class="row">
    <div class="col-lg-2 col-md-3 col-sm-12" style="background-color:grey; border: 1px solid; padding: 1rem;">
        列内容1
    </div>
    <div class="col-lg-2 col-md-3 col-sm-12" style="background-color:grey; border: 1px solid; padding: 1rem;">
        列内容2
    </div>
    <div class="col-lg-2 col-md-3 col-sm-12" style="background-color:grey; border: 1px solid; padding: 1rem;">
        列内容3
    </div>
    <div class="col-lg-2 col-md-3 col-sm-12" style="background-color:grey; border: 1px solid; padding: 1rem;">
        列内容4
    </div>
    <div class="col-lg-2 col-md-3 col-sm-12" style="background-color:grey; border: 1px solid; padding: 1rem;">
        列内容5
    </div>
    <div class="col-lg-2 col-md-3 col-sm-12" style="background-color:grey; border: 1px solid; padding: 1rem;">
        列内容6
    </div>
</div>

额外检查项 #

1. 确认Codeply中已正确引入Bootstrap CSS资源：
   • Bootstrap 5需引入：<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
   • Bootstrap 3需引入：<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
2. 调整浏览器窗口大小测试断点：
   • Bootstrap 5：大屏断点≥992px，中屏断点≥768px
   • Bootstrap 3：大屏断点≥1200px，中屏断点≥992px

内容的提问来源于stack exchange，提问作者Suki