Bootstrap 3中col-sm类失效：桌面转移动端UI适配问题

看起来你踩了Bootstrap 3栅格系统的一个常见坑——对不同屏幕尺寸的断点类理解有误。咱们一步步来理清楚：

核心问题：Bootstrap 3的栅格断点规则 #

Bootstrap 3采用移动优先的栅格体系，但每个类对应的屏幕范围是固定的：

• col-xs-*：针对超小屏幕（<768px，也就是手机端）
• col-sm-*：针对小屏幕（≥768px，平板类设备）
• col-md-*：针对中等屏幕（≥992px，桌面端）
• col-lg-*：针对大屏幕（≥1200px，大桌面）

你目前只设置了col-md-3和col-sm-2，这两个类都不作用于<768px的移动端，所以手机上自然看不到布局变化——Bootstrap会默认让列在超小屏幕下堆叠成100%宽度。

解决方案 #

根据你的需求，给组件添加col-xs-*类就能让移动端生效了。比如你想让移动端和小屏幕一样占2列宽度，可以修改代码：

<div id='main' class="container" ng-controller="searchController"> 
  <div class="row" id='tags'> 
    <div class="col-md-3 col-sm-2 col-xs-2" style="...">
      <!-- 组件内容 -->
    </div>
  </div>
</div>

如果希望移动端让列堆叠成100%宽度（更贴合手机端的阅读体验），可以用col-xs-12：

<div class="col-md-3 col-sm-2 col-xs-12" style="...">

额外排查点 #

如果添加col-xs-*后还是没效果，检查这两点：

• 确认你正确引入了Bootstrap 3的CSS文件，且没有在自定义样式中覆盖了栅格类的width、float等核心属性
• 检查你代码中style="dis..."的完整样式，比如如果设置了display: none或者display: block（而非Bootstrap默认的栅格布局样式），也可能导致栅格失效

内容的提问来源于stack exchange，提问作者Berkin