移动端按钮横向滚动布局时溢出屏幕的解决方法求助

嘿，这个问题我之前也碰到过！核心原因是你虽然用了flex-nowrap让按钮不换行，但容器本身的宽度约束没做好，再加上Bootstrap的row自带负margin，导致整个按钮行的宽度超出了视口范围，所以滚动条虽然生效，但按钮还是会“跑”出屏幕。

给你一套完整的修复方案，一步步来：

1. 给按钮行加一个滚动容器 #

首先，把你的row包裹在一个专门的容器里，这个容器负责控制横向溢出行为：

<div class="button-scroll-container">
  <div class="row justify-content-center flex-nowrap gx-0 myrow" style="margin-top: 160px; gap: 12px;">
    <a style="color: #51CC8B; flex-shrink: 0;" class="btnP">PRG <span class="nav-link btn-glyphicon1">100</span> </a>
    <a style="color: #4981C2; flex-shrink: 0;" class="btnR">TRV <span class="nav-link btn-glyphicon">50</span> </a>
    <a style="color: #4981C2; flex-shrink: 0;" class="btnD">DN <span class="nav-link btn-glyphicon">21</span> </a>
    <!-- 可以继续加更多按钮 -->
  </div>
</div>

2. 添加强制滚动的CSS样式 #

给这个外层容器加上样式，确保它不会超出视口，同时触发横向滚动：

.button-scroll-container {
  overflow-x: auto;
  width: 100%;
  /* 可选：隐藏纵向滚动条，避免出现不必要的纵向滚动 */
  overflow-y: hidden;
  /* 可选：给容器加个上下内边距，让按钮和其他元素更协调 */
  padding: 8px 0;
}

/* 可选：自定义滚动条样式，提升移动端体验 */
.button-scroll-container::-webkit-scrollbar {
  height: 6px;
}
.button-scroll-container::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-radius: 3px;
}
.button-scroll-container::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}
.button-scroll-container::-webkit-scrollbar-thumb:hover {
  background: #999;
}

关键修改点解释 #

• gx-0类：移除Bootstrap row默认的横向负margin，避免按钮行本身超出外层容器的宽度。
• flex-shrink: 0：给每个按钮加上这个样式，禁止按钮在空间不足时被压缩，保证每个按钮都能保持自己的原始宽度，这样当总宽度超过容器时才会触发横向滚动。
• gap: 12px：代替按钮的margin来控制间距，让按钮之间的距离更均匀，也避免margin叠加导致的溢出问题。

这样修改后，移动端屏幕缩小的时候，按钮会保持在一行，超出部分可以通过横向滚动查看，而且不会出现按钮溢出屏幕的情况啦！

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