Bootstrap 5容器设置固定最小宽度，忽略小断点实现滚动

核心问题分析 #

你添加min-width:960px后列仍堆叠，是因为Bootstrap内置的sm/xs断点媒体查询会强制列宽度为100%，仅固定容器宽度无法覆盖这个规则，需要同时处理容器约束和栅格列的响应式样式。

具体实现方案 #

1. 自定义容器样式 #

给容器加专属类（比如.fixed-min-container），固定最小宽度并开启横向滚动：

.fixed-min-container {
  min-width: 960px;
  overflow-x: auto;
}

建议用自定义类而非直接修改默认.container，避免影响全局样式。

2. 覆盖小断点的栅格列样式 #

针对屏幕小于960px的场景，强制列保持桌面端的宽度，阻止堆叠：

/* 全局覆盖所有列类型 */
@media (max-width: 959.98px) {
  .fixed-min-container .col,
  .fixed-min-container [class^="col-"],
  .fixed-min-container [class*=" col-"] {
    flex: 0 0 auto;
    width: auto;
  }
}

如果用了特定栅格类（比如.col-md-6），可以精准指定宽度：

@media (max-width: 959.98px) {
  .fixed-min-container .col-md-6 {
    width: 50%;
  }
  .fixed-min-container .col-md-3 {
    width: 25%;
  }
}

3. 结合设备视图区分 #

在桌面端视图中给容器添加.fixed-min-container类，移动端视图则保留原生Bootstrap响应式逻辑，不添加该类即可。

注意事项 #

• 不要修改Bootstrap源文件，用自定义样式覆盖更安全，避免框架升级时丢失修改。
• 测试960px左右的边界屏幕，确保滚动和列布局表现正常。

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