Bootstrap如何实现响应式的垂直滚动内容块带边框阴影组件-Bootstrap教程-PHP中文网

必须配合max-height才生效，仅.overflow-y-auto无效；.border和.shadow-sm等类可直接使用，但阴影会随滚动移动，需外层包裹或伪元素固定。

bootstrap如何实现响应式的垂直滚动内容块带边框阴影组件

用 `.overflow-y-auto` + `.border` + `.shadow` 组合就能实现，但必须限制高度

Bootstrap 5 默认不给容器设固定高，而垂直滚动只在内容超限时触发——所以光加 overflow-y-auto 没用。必须配合 max-height 或 height 才生效。

推荐用 max-height，更灵活：内容少时不撑满，多时才滚动。边框和阴影直接用内置类：.border（细实线）、.border-1（可选粗细），.shadow-sm / .shadow 控制阴影强度。

别用 height: 300px 这种硬编码，改用 style="max-height: 300px;" 或自定义 CSS 变量适配不同断点
移动端小屏下建议降低 max-height，比如用 max-height: 200px 配合 @media (max-width: 576px)
.overflow-y-auto 在 Safari 旧版有兼容问题，若需支持 iOS 12 以下，得加 -webkit-overflow-scrolling: touch

响应式高度要靠媒体查询或 `vh` 单位，不能只靠 Bootstrap 工具类

Bootstrap 的 .h-25、.h-50 等高度工具类是固定比例，不随视口变化“缩放”，也不适配内容区域的实际可用空间。真正响应式得手动介入。

常见做法是用 max-height: 60vh（占视口高的 60%），再结合断点微调：

<div class="border shadow-sm overflow-y-auto" style="max-height: 60vh;">
  <p>长内容...</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap"><img
														src="https://img.php.cn/upload/skill/000/000/081/179025304626966.jpg" alt="VPS Bootstrap" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap" class="overflowclass">VPS Bootstrap</a>
													<p class="overflowclass">从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
  <p>长内容...</p>
</div>

vh 在 iOS Safari 横屏时可能误算（把地址栏高度也算进视口），稳妥起见可在横屏时降为 50vh
如果父容器用了 flex 布局（如 .d-flex.flex-column），优先用 flex-grow-1 + min-height: 0 触发 flex 容器内滚动，比 max-height 更健壮
避免嵌套多个 overflow 容器，否则滚动行为可能冲突，尤其在模态框（.modal-body）里再套一层时

`.shadow` 在滚动容器里会随内容移动，想固定阴影得用伪元素或外层包裹

直接给滚动容器加 .shadow，阴影会随内容一起滚动——这不是 bug，是 CSS 正常行为。如果设计要求阴影始终“贴底”或“悬浮在内容上方”，就得绕开。

两种轻量方案：

外层包一个无滚动的 <div class="border shadow-sm">，内层再套 <code><div class="overflow-y-auto" style="max-height: 300px;"> ——阴影不动，滚动只发生在内层 <li>用 <code>::after 伪元素模拟固定阴影：给容器加 position: relative，再用绝对定位 + box-shadow 模拟底部渐隐效果（适合需要“内容被遮挡”视觉感的场景）
慎用 filter: drop-shadow()，它不会随滚动裁剪，容易溢出容器边界，且性能略差

移动端触摸滚动卡顿？加 `.scroll-smooth` 并检查父级 `transform`

iOS 和部分安卓 WebView 中，纯 overflow-y-auto 容器滚动可能生涩。Bootstrap 5.3+ 提供了 .scroll-smooth 工具类（本质是 scroll-behavior: smooth），但它只影响锚点跳转，不解决惯性滚动卡顿。

真正起效的是这三点：

确保滚动容器或其任意父级没设 transform（比如 .translate-y-1）、will-change 或 backface-visibility，这些会破坏原生滚动优化
加 style="-webkit-overflow-scrolling: touch;"（仅 iOS WebKit，已逐步弃用但仍有实效）
若内容含大量图片或未优化 DOM，滚动前先用 contain: layout style paint 隔离渲染影响（需 CSS 支持）

边框阴影本身不影响滚动性能，但叠加过多 box-shadow 层或模糊值过大（如 shadow-lg）会在低端机上引发重绘延迟。