Bootstrap列在小屏幕重叠问题：如何实现列自动堆叠排列

嘿，这个问题我之前碰过好几次，本质是没利用好Bootstrap的响应式断点规则。你用的col-md-3和col-md-9只在屏幕宽度≥768px（也就是md及以上尺寸）的时候生效，当切换到xs小屏幕（<768px）时，这些类的布局规则会失效，如果没有额外设置，就容易出现重叠或者布局混乱的情况。

给你几个可行的解决方案：

• 添加小屏幕网格类：直接给两个列加上col-xs-12类，这样在xs尺寸下每列都会占满整一行，自然就会自动换行到下方，不会重叠。修改后的HTML代码如下：

<div class="container"> 
  <div class="row"> 
    <div class="col-md-3 col-xs-12"></div> 
    <div class="col-md-9 col-xs-12 area-style"></div> 
  </div> 
</div>

如果是Bootstrap 4及以上版本，要换成col-12（因为Bootstrap 4把xs前缀去掉了，默认就是超小屏幕的适配类）。

• 检查Bootstrap加载是否正常：有时候布局异常是因为Bootstrap的CSS没有正确引入，或者被自定义样式覆盖了.row和.col-*-*的基础规则。比如.row的负margin、.col-*-*的float和padding属性，这些是网格布局正常工作的核心，别用自定义样式把它们冲掉了。

• 调整小屏幕下的固定高度：你的.area-style设置了固定的height:500px，在小屏幕下这个高度可能会导致布局挤压，你可以用媒体查询针对xs屏幕调整高度：

@media (max-width: 767px) {
  .area-style {
    height: auto; /* 或者改成适合小屏幕的高度值 */
  }
}

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