Bootstrap 按钮在 overflow-y: scroll 容器中丢失圆角，实为 .row 的负外边距与滚动容器边界裁剪所致；正确嵌套 container 类、避免孤立 row，即可恢复圆角样式并保持响应式布局。
bootstrap 按钮在 `overflow-y: scroll` 容器中丢失圆角，实为 `.row` 的负外边距与滚动容器边界裁剪所致；正确嵌套 `container` 类、避免孤立 `row`，即可恢复圆角样式并保持响应式布局。
在 Bootstrap 中，.row 类并非独立可用的布局单元——它专为包裹 .col-* 列而设计，其内部通过 负外边距（negative margin） 抵消列（.col）的左右内边距（gutter），从而实现无缝对齐。但当 .row 直接作为 overflow 容器（如你的 .scrol）的子元素时，其左右负外边距会超出父容器边界，而 overflow: scroll 或 auto 会严格裁剪超出部分——这恰好切掉了按钮左右两端的圆角（border-radius），导致视觉上呈现为“直角矩形”，尽管 CSS 中 border-radius 依然生效。
✅ 正确修复方式：遵循 Bootstrap 网格规范
核心原则是：.row 必须直接嵌套在 .container（或 .container-fluid）内，由容器提供内边距（padding）来容纳 .row 的负外边距，防止内容被裁剪。
✅ 推荐方案（推荐使用）
将 .scrol 同时赋予 .container 类，并确保每个 .row 都位于该容器内：
<div class="container px-4 px-lg-5 d-flex h-100 align-items-center justify-content-center">
<div class="d-flex justify-content-center">
<div class="text-center">
<h6 class="text-white-50 mb-2 mx-auto">Your Ordered Playlist:</h6>
<!-- 关键：.scrol 同时添加 .container -->
<div class="container scrol">
{% for i in rankings %}
<div class="row">
<!-- 推荐：按钮放入 .col 以保障网格语义与间距一致性 -->
<div class="col">
<input autocomplete="off" value="{{ i }}" class="btn btn-primary mt-3 text-wrap w-100" name="playlist">
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
对应 CSS 微调（推荐 overflow-y: auto 而非强制 scroll）：
.scrol {
height: 400px;
overflow-y: auto; /* 仅在需要时显示滚动条，更友好 */
}
⚠️ 注意事项
- 勿省略 .col 包裹：虽然 可直接放在 .row 内，但 Bootstrap 官方要求 .row 下必须是 .col-* 元素。否则可能引发不可预知的间距、对齐或响应式行为异常。
- 避免孤立 .row：任何脱离 .container 父级的 .row 都存在被裁剪风险，尤其在 overflow 上下文中。
- overflow-y: auto 更佳：相比 scroll，auto 仅在内容溢出时显示滚动条，提升用户体验且不影响初始渲染样式。
? 验证技巧
可通过浏览器开发者工具检查：
- 选中按钮 → 查看 Computed 标签页中的 border-radius 是否为 0.375rem（确认样式未被覆盖）；
- 检查 .row 的 margin-left/margin-right 是否为 -15px（Bootstrap 默认），并确认其父 .container.scrol 是否有 padding-left/padding-right（通常为 15px），二者应相互抵消。
✅ 总结
按钮圆角“消失”本质是 CSS 盒模型与 Bootstrap 网格机制共同作用下的视觉裁剪问题，而非 overflow 本身禁用圆角。只要严格遵守 Bootstrap 的容器→行→列三层嵌套结构，就能彻底解决该问题，同时保持代码可维护性与响应式健壮性。
