如何在小屏幕下将列设为跨0列，隐藏购买按钮所在的侧边列？

你使用的col-sm-0不属于Bootstrap原生支持的类，所以无法生效，可通过以下两种方式实现需求：

方案1：使用Bootstrap自带响应式工具类（推荐） #

Bootstrap 4/5 版本 #

直接给购买按钮所在列添加d-none d-md-block类，搭配原有列宽配置即可，完整类名示例：

<div class="col-md-4 d-none d-md-block">
  <!-- 购买按钮内容 -->
</div>

• d-none：默认所有屏幕尺寸下隐藏元素
• d-md-block：仅在屏幕宽度≥768px（md断点）及以上时显示元素

剩余的产品内容列可设置为col-md-8，小屏幕下会自动占满整行宽度，不会出现堆叠错乱问题。

Bootstrap 3 版本 #

直接给按钮列添加hidden-xs hidden-sm类即可实现小屏隐藏效果。

方案2：自定义列宽为0的类 #

如果你需要通过控制列宽实现隐藏，可手动添加以下CSS代码：

/* 适配sm断点（<768px）下隐藏列 */
@media (max-width: 767.98px) {
  .col-sm-0 {
    flex: 0 0 0;
    max-width: 0;
    padding: 0;
    overflow: hidden;
  }
}

添加后你之前写的col-sm-0 col-md-4类即可正常生效，小屏幕下该列宽度变为0自动隐藏，不会占用布局空间导致堆叠留白。

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