Bootstrap栅格列在手机端为什么没有堆叠？

朱莉酱~ 提问于 2026-02-18 10:20:34 阅读 20

组件

大家好，我在用Bootstrap做响应式布局时遇到个问题。我给两个div加了col-sm-6类，期望在手机屏幕宽度下它们能堆叠成上下排列，但实际还是并排显示。

我试过把sm改成md，但这样在平板尺寸还是并排。也确认了外层有container和row容器，代码如下：


<div class="container">
  <div class="row">
    <div class="col-sm-6">左侧内容</div>
    <div class="col-sm-6">右侧内容</div>
  </div>
</div>

手机端宽度测试时（小于768px），两个列仍然并排导致水平滚动条。这是哪里设置错了呢？

我来解答赞 3 收藏

反馈

1 条解答

奕冉~ Lv1

这个问题我之前踩过坑，说白了就是Bootstrap的栅格类没选对。你用的是col-sm-6，这里的sm表示小屏幕及以上都会生效，也就是说在宽度大于等于576px的时候，两个div会并排显示。而手机端的宽度通常小于576px，所以你的期望是它们能堆叠，但实际还是并排。

解决办法很简单，把col-sm-6改成col-12 col-sm-6试试。这里加个col-12的意思是，在超小屏幕（也就是宽度小于576px）时，每个div都占满12列，自然就会堆叠上下排列；而在小屏幕及以上，col-sm-6会生效，继续保持并排。

改完后的代码大概是这样：

<div class="container">

  <div class="row">

    <div class="col-12 col-sm-6">左侧内容</div>

    <div class="col-12 col-sm-6">右侧内容</div>

  </div>

</div>

还有一点要注意，有时候我们可能引入了自定义的CSS或者第三方样式，这些样式可能会覆盖Bootstrap的默认行为。比如设置了float、width之类的属性，也会导致布局异常。所以如果你改完上面的代码还是有问题，检查一下是不是有其他样式干扰了。

最后吐槽一句，Bootstrap的栅格系统其实挺灵活的，但刚开始用的时候真的容易被这些断点搞懵。希望这个回答能帮你解决问题。

2026-02-18 10:30