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

Prog.付敏提问于 2026-02-18 14:03:34 阅读 41

组件

大家好，我在用Bootstrap做产品列表时遇到问题。按照文档写的代码，给每个卡片加了col-sm-6 col-md-4类，期望在手机端显示两列，平板显示三列，但实际在iPhone X模拟器里却变成单列了。

我检查过父容器确实加了row类，而且清除了其他样式影响。尝试把sm改成xs后移动端显示正常了，但平板又变成两列了，完全和预期相反。这是响应式工具的使用方式有问题吗？

代码大概是这样写的：


<div class="row">
  <div class="col-sm-6 col-md-4">卡片1</div>
  <div class="col-sm-6 col-md-4">卡片2</div>
  <!-- 总共有6个这样的卡片 -->
</div>

用浏览器开发者工具看，在768px宽度时确实应用了col-sm-6的类，但实际宽度却撑满了整个屏幕。是不是哪里没理解响应式工具的断点逻辑？

CSS框架响应式工具响应式框架

我来解答赞 6 收藏

反馈

2 条解答

极客明月 Lv1

你问题出在对 Bootstrap 响应式断点的理解反了。
col-sm-6 的意思是：在屏幕宽度 ≥576px 时生效，也就是从手机小屏开始就生效了，而不是“只在小屏生效”。
你实际看到的 iPhone X（375px 宽）属于 <576px 的范围，所以 col-sm-6 根本没被应用，Bootstrap 默认 fallback 到 col-12（单列），所以卡片占满整行。

你试了把 sm 改成 xs（比如 col-xs-6），但注意：Bootstrap 4 开始已经废弃 xs 前缀，col-xs-6 在新版里压根不生效，你看到的“正常”可能是浏览器缓存或你用的是老版本，别被这个误导。

正确写法应该是：
- 手机端两列 → col-6（因为 ≥320px 都能撑两列，实际项目里一般直接从 0px 就用这个）
- 平板三列 → col-md-4（≥768px）
- 桌面四列 → col-lg-3（≥992px）

所以你这需求直接写成：
col-6 col-md-4 就行，别加 col-sm，因为 sm 断点对手机没意义。

性能上这完全没问题，就是个 class 层级问题，没额外 DOM 操作或 JS 计算，放心用。

如果还单列，检查下有没有：
- meta viewport 没加（<meta name="viewport" content="width=device-width, initial-scale=1">）
- CSS 被全局覆盖（比如 display: block 或 width: 100%）
- Bootstrap 没正确引入（比如用的是定制版但删了 grid 系统）

另外建议用真实设备测，模拟器有时候缩放比例乱跳。

2026-02-26 17:05

西门燕燕 Lv1

问题出在断点类名上，Bootstrap 4开始用col-类代替了以前的col-xs-。改成这样：

<div class="row">

  <div class="col-6 col-md-4">卡片1</div>

  <div class="col-6 col-md-4">卡片2</div>

  <!-- 总共有6个这样的卡片 -->

</div>

手机端用col-6确保两列布局，平板及以上用col-md-4控制三列。别忘了检查是不是用了Bootstrap老版本，老版本还是得用col-xs-6。

2026-02-18 14:04