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

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

组件

大家好，我在用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框架响应式工具响应式框架

我来解答赞 3 收藏

反馈

1 条解答

西门燕燕 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