使用Bootstrap时小屏幕下col元素消失问题求助

针对你遇到的大屏幕布局正常、小屏幕下某列消失的问题，常见原因和解决方法如下：

1. 响应式列类缺失或错误 #

如果你的col元素只使用了col-lg-*这类大屏专属类，虽Bootstrap默认会让小屏幕下col占满100%宽度，但一旦和自定义样式冲突，就可能导致布局异常。确保为每个col添加全断点的响应式类，比如：

<div class="col-lg-4 col-md-6 col-12">
  <!-- 卡片内容 -->
</div>

col-12能确保小屏幕下该列占满整行，避免因宽度计算错误被隐藏。

2. 父容器溢出隐藏或固定高度 #

如果卡片的父容器（比如row或自定义容器）设置了overflow:hidden和固定height，小屏幕下卡片内容撑开高度超过父容器时，会被截断隐藏。解决方法：

• 移除父容器的固定height设置，改用min-height让容器随内容自适应；
• 给卡片添加h-100类，让卡片在row中撑满高度，避免内容溢出：

<div class="card h-100">
  <!-- 卡片内容 -->
</div>

3. 自定义CSS冲突 #

检查你的自定义样式或媒体查询，是否存在针对小屏幕（如@media (max-width: 767px)）设置的display:none、visibility:hidden，或是覆盖了Bootstrap col的width、display属性。比如这类错误规则会直接导致小屏幕下第三列消失：

@media (max-width: 767px) {
  .col-lg-4:nth-child(3) {
    display: none;
  }
}

找到这类规则并删除或修改即可。

4. 浮动或布局破坏 #

如果手动给col添加了float:left，小屏幕下未清除浮动，会导致布局错乱。Bootstrap的row默认使用flex布局，不要手动添加浮动；若已添加，可在row上添加clearfix类，或改用flex相关类调整布局。

快速排查技巧 #

打开浏览器开发者工具（F12），切换到小屏幕视图：

• 选中消失的col元素，查看右侧样式面板，检查display、width、margin、overflow等属性是否异常；
• 查看父元素的盒模型，确认是否因高度不足导致内容被截断。

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