本文介绍如何仅用 CSS 媒体查询，让 Bootstrap 5 的 .row 在移动端自动转为 flex-row 并启用水平滚动，同时保持桌面端标准栅格行为，避免重复加载图片或依赖 JavaScript。
本文介绍如何仅用 css 媒体查询，让 bootstrap 5 的 `.row` 在移动端自动转为 `flex-row` 并启用水平滚动，同时保持桌面端标准栅格行为，避免重复加载图片或依赖 javascript。
在 Bootstrap 5 中，默认的 .row 是一个 display: flex 容器，但其 flex-wrap: wrap 特性会导致多列内容在小屏幕下自动换行，破坏水平布局意图。而移动端常需「单行横向滚动」（如商品卡片、图片轮播预览等），此时需覆盖默认行为——无需双 DOM 结构，也无需 JS 检测设备，纯 CSS 即可优雅实现。
核心思路是：复用原有 .row 元素，通过媒体查询在小屏下强制重置其 Flex 属性，并添加滚动支持。Bootstrap 5 已内置响应式工具类（如 d-flex d-md-block），但无法直接实现「滚动式 flex-row」，因此需自定义 CSS 类配合媒体查询。
以下为推荐方案（已验证兼容 Bootstrap 5.3+）：
/* 仅在小屏（≤600px）下激活水平滚动模式 */
@media (max-width: 600px) {
.row.scrollable-row {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch; /* 提升 iOS 滚动流畅度 */
scroll-behavior: smooth;
/* 重置 Bootstrap 行内边距（gutter），避免滚动区域被撑开 */
--bs-gutter-x: 0 !important;
--bs-gutter-y: 0 !important;
/* 可选：隐藏滚动条（视觉更干净） */
scrollbar-width: none; /* Firefox */
}
.row.scrollable-row::-webkit-scrollbar {
display: none; /* Chrome/Safari */
}
}
/* 保持原有样式基础 */
.setwidth {
min-height: 100px;
min-width: 100px;
margin: 15px;
}HTML 结构保持简洁，无需重复 DOM，无图片重复加载风险：
立即学习“前端免费学习笔记（深入）”；
<div class="container pt-5 pb-5">
<h2 class="font-weight-light">响应式水平滚动行</h2>
<div class="row scrollable-row">
<div class="col-2 setwidth bg-success">Card</div>
<div class="col-2 setwidth bg-danger">Card</div>
<div class="col-2 setwidth bg-info">Card</div>
<div class="col-2 setwidth bg-warning">Card</div>
<div class="col-2 setwidth">Card</div>
<!-- 更多列... -->
</div>
</div>✅ 优势说明：
- 零 JS 依赖：完全基于 CSS 媒体查询，性能更优，SEO 友好；
-
单次渲染：图片仅加载一次，避免双
<div> 方案导致的资源冗余； <li> <strong>语义清晰</strong>：仍使用 <code>.row+.col-*，符合 Bootstrap 语义规范； -
平滑体验：启用
-webkit-overflow-scrolling: touch和scroll-behavior: smooth提升移动端触控滚动体验。 - 避免对
.row直接全局覆盖display: flex，务必限定.scrollable-row类名，防止影响其他栅格； - 若子项
.col-*内含响应式内容（如图片），建议为其设置flex-shrink: 0（例如.scrollable-row > * { flex-shrink: 0; }），防止 Safari 下意外压缩； -
--bs-gutter-x/y重置必须加!important，因 Bootstrap 5 的 gutter 是通过 CSS 变量注入的，普通声明权重要求更高。
⚠️ 注意事项：
该方案已在 Chrome、Firefox、Safari（iOS/iPadOS）及 Edge 移动端实测通过，是兼顾兼容性、可维护性与性能的最佳实践。
