Bootstrap栅格系统在小屏下为啥不按预期堆叠？

❤恒硕提问于 2026-02-26 08:44:19 阅读 47

组件

我用 Bootstrap 的栅格系统写了个两栏布局，期望在手机上变成上下堆叠，但实际却挤在一起显示不全。我明明用了 col-md-6 啊，难道还要额外加别的类？

这是我的代码：

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

我来解答赞 8 收藏

反馈

2 条解答

欣奥🍀 Lv1

md是中等屏幕的断点，手机要用col-12或者col-sm-6。直接这样改：



  左边内容


  右边内容

不加小屏的类默认不会堆叠，这破栅格系统坑了多少新手。

2026-03-05 15:15

W″丽萍 Lv1

你这个代码本身没问题，但没加 viewport meta 标签，导致移动端渲染时按桌面宽度缩放了，所以 col-md-6 在手机上还是按 992px 以上宽度的逻辑算，自然就挤在一起了。

按照规范，HTML 头部必须加上这句：

不然 Bootstrap 的响应式类根本不会按你想象的生效，特别是 col-xs-、col-sm-、col-md- 这些断点类都依赖它。

另外确认下你的 Bootstrap 版本——如果是 v4+，col-md-6 在小于 992px 时确实会自动堆叠，但前提是页面宽度真的被视口控制住了。我见过不少项目漏了这行，调试一小时才发现是 viewport 没加，属实是低级但高频的坑。

2026-02-26 09:00