Bootstrap响应式工具在移动端显示异常怎么办？

奥翔的笔记提问于 2026-02-13 07:01:28 阅读 243

组件

用Bootstrap的响应式列布局时，在手机端两列总是挤在一起不换行，明明加了col-sm-6啊。

我按照文档写了这样的代码：


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

在电脑上正常显示两列，但手机预览时却堆叠成一列，而且左右留白很大。试过改col-md-6反而变成两列挤在一起。检查过元标签和CSS都没问题，这是为什么？

我来解答赞 13 收藏

反馈

2 条解答

FSD-秀丽 Lv1

我之前踩过这个坑，问题不在 Bootstrap 本身，而在于你没加 viewport 元标签，或者加错了。

你贴的代码结构本身没问题，col-sm-6 在小屏幕（比如手机）上确实会变成 100% 宽，也就是堆叠成一列——但你说「挤在一起不换行」，还「左右留白很大」，这明显是移动端没缩放页面导致的视觉错觉，或者根本没触发响应式逻辑。

先确认你页面的 <head> 里有没有这行：

<meta name="viewport" content="width=device-width, initial-scale=1">

如果没加，或者写成了 width=1024、user-scalable=no 这种，手机浏览器就会按桌面宽度渲染页面，导致两列挤在窄屏里，看起来像没换行。

再检查下你用的 Bootstrap 版本。如果是 Bootstrap 4+，col-sm-6 的确是「小屏及以上」都两列，但只有在视口宽度 ≥576px 时才生效。手机竖屏一般也就 360–414px，小于 576px，所以它会自动变成 100% 宽，也就是换行堆叠。你看到的「两列挤在一起」其实是手机浏览器在缩放显示桌面布局，实际在开发者工具里打开设备模拟模式看，应该是一列。

如果你想要手机上也两列，那就得用 col-6（不带 sm/md/lg），比如：

<div class="container">

  <div class="row">

    <div class="col-6">左边内容</div>

    <div class="col-6">右边内容</div>

  </div>

</div>

这样所有屏幕宽度下都是两列，但内容别太长，否则手机上会横向滚动。

顺带说一句，col-md-6 是 ≥768px 才两列，手机肯定不生效，你改成它反而更窄了，因为 desktop 逻辑被放大了。

我见过好几次，开发者本地用 Chrome 开发者工具模拟设备时没问题，但真机打开就崩，最后发现是没加 viewport 标签——这个真别再踩了，加一行就能救回来。

2026-02-23 17:55

长孙胜换 Lv1

应该是没加 viewport 元标签，手机端识别不了响应式断点。加上这行就行：

<meta name="viewport" content="width=device-width, initial-scale=1">

另外 col-sm-6 在屏幕小于576px时会自动占满整行，真想在手机上并排得用 col-6。

2026-02-13 07:02