Bootstrap如何实现仅移动端1列、桌面端保留原有8列布局

Bootstrap是移动端优先的栅格体系，栅格类会从设置的断点开始，向更大尺寸的屏幕持续生效，你之前单独用col-sm、col-md类不生效，核心原因是没有在桌面断点重置栅格规则，导致小屏的列宽规则被带到了桌面端，覆盖了你原有的8列样式。

正确实现类组合 #

直接给你的列元素加两个类即可：col-12 col-md-auto

• col-12：针对768px以下的移动端设备生效，让单个列占满整行宽度，实现单列排布
• col-md-auto：针对768px及以上的平板、桌面设备生效，此时列宽不再受Bootstrap栅格的固定宽度约束，完全由你原有写好的8列CSS规则控制，不会破坏原有桌面端显示效果

代码示例 #

<div class="row">
  <div class="col-12 col-md-auto">
    <!-- 这里放你原有8列布局的内容即可 -->
  </div>
  <!-- 其余列结构和你之前的写法保持一致 -->
</div>

避坑说明 #

• 不要单独使用col-sm-12/col-12而不设置md断点的覆盖类：小屏的12列规则会向上继承到桌面端，直接把你原有8列布局挤成单列
• 不要在桌面端使用col-md-*这类固定栅格宽度的类：这类类会强制按照Bootstrap的12等分栅格计算宽度，直接覆盖你自定义的8列样式
• 如果发现桌面端样式还是被覆盖，检查你的自定义CSS加载顺序，要放在Bootstrap的CSS文件之后加载，保证自定义样式优先级更高

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