Bootstrap Row在小屏幕下未堆叠Div的问题求助

嘿，我看到你遇到了Bootstrap栅格布局在小屏设备下不堆叠的问题，这大概率是因为你给#themebox加的float: right属性搞的鬼！

问题根源 #

Bootstrap 4及以上版本的.row默认采用Flexbox布局，子元素.col-*会自动根据屏幕尺寸调整排列方式。而float: right会让元素脱离Flexbox的控制，导致小屏设备下两个div无法按照.col-sm-12的规则占满整行并垂直堆叠，反而保持并排状态。

修改后的完整代码 #

HTML部分（无需改动）

<div class="container">
  <div class="row">
    <div id="left" class="col-sm-12 col-lg-3">
      <br>
      <br>
      <h3> Mine Style</h3>
      <br>
      <br>
      <button id="customize">Customize</button>
    </div>
    <div class="col-sm-12 col-lg-9" id="themebox"></div>
  </div>
</div>

CSS部分（移除float: right）

#themebox{
  height: 500px;
  background-color: white;
  /* 移除干扰布局的float属性 */
  box-shadow: 0 15px 45px 0 rgba(0,0,0,.1);
  padding-left: 0;
  padding-right: 0;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.row{
  margin-left: 0 !important;
  margin-right:0 !important;
}

额外说明 #

• 确保你引入的是Bootstrap 4.x或5.x版本的CSS（如果是Bootstrap 3，栅格逻辑基于浮动，但你的类名写法更适配4+版本）。
• 尽量不要给Bootstrap的栅格列元素添加float、position: absolute这类会破坏原有布局规则的属性，除非你有明确的定制需求且清楚后果。

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