Bootstrap栅格布局：桌面端一行4列、小屏设备一行2列失效问题

你当前代码失效的原因主要有两点：

• 类名跨Bootstrap版本混用：w-100是Bootstrap 4之后才新增的全宽工具类，在Bootstrap 3环境下没有任何对应样式效果；而visible-sm是Bootstrap 3的显示控制类，Bootstrap 4/5版本已经完全移除了这套命名体系，替换为d-*系列的显示控制类，两套不同版本的类名搭配使用，自然无法触发预期的换行效果。
• 响应式覆盖范围不全：就算类名能正常生效，原代码里的visible-sm只在平板尺寸断点生效，到手机端的超小尺寸断点时，这个强制换行块会被隐藏，无法满足“所有小尺寸设备每行2个条目”的要求。

Bootstrap 4/5 环境实现 #

不需要额外插入强制换行的空白块，直接利用网格系统的自动换行能力即可，核心是给列设置全尺寸小屏占比、桌面端占比的类名：

<div class="container">
  <div class="row">
    <div class="col-6 col-md-3">第1列</div>
    <div class="col-6 col-md-3">第2列</div>
    <div class="col-6 col-md-3">第3列</div>
    <div class="col-6 col-md-3">第4列</div>
  </div>
</div>

• 类名说明：col-6代表屏幕宽度小于md断点时，每列占12栅格的6份，也就是一行刚好排布2个条目；col-md-3代表屏幕宽度达到md断点及以上（桌面端尺寸）时，每列占12栅格的3份，一行刚好排布4个条目。新版网格采用弹性布局，会根据每个列的设置宽度自动计算换行时机，比手动插入空白块的方案稳定性更高，不会出现错位问题。

Bootstrap 3 环境实现 #

如果还在使用Bootstrap 3版本，需要修正强制换行块的类名，同时覆盖手机、平板两个小屏断点的显示状态：

<div class="container">
  <div class="row">
    <div class="col-md-3 col-sm-6 col-xs-6">第1列</div>
    <div class="col-md-3 col-sm-6 col-xs-6">第2列</div>
    <!-- 仅在手机、平板端显示的强制换行块，桌面端自动隐藏 -->
    <div class="clearfix visible-xs-block visible-sm-block"></div>
    <div class="col-md-3 col-sm-6 col-xs-6">第3列</div>
    <div class="col-md-3 col-sm-6 col-xs-6">第4列</div>
  </div>
</div>

• 注意：Bootstrap 3环境下不能直接用visible-sm作为块级换行的类名，需要指定为visible-sm-block，否则元素是内联显示状态，配合浮动布局的网格结构，无法触发有效的强制换行效果。

内容的提问来源于stack exchange，提问作者The Dead Man