Bootstrap sticky页脚网格布局无法适配移动端如何解决

Bootstrap 4 栅格系统的断点规则是：带-sm-标识的列类（比如你用的col-sm-5、col-sm-2）仅在视口宽度≥576px时才会按设定比例横向排列，当视口宽度小于576px（移动端尺寸）时，所有列默认会占满整行宽度纵向堆叠，这是框架默认的响应式行为，和position: sticky页脚定位逻辑无关。

将带sm断点限制的列类替换为无断点限制的col-*类，即可让5:2:5的三栏横向布局在所有屏幕尺寸下生效。同时补充少量适配样式，避免极小屏下按钮文字溢出、折行。

调整后的完整代码 #

CSS部分 #

.footer {
  position: sticky;
  bottom: 0;
  width: 100%;
  line-height: 40px;
  background-color: #f5f5f5;
}

.footer-buttons {
  width: 100%;
}

/* 小屏适配样式 */
.footer .btn {
  padding: 0.5rem 0.25rem;
  font-size: 0.9rem;
  white-space: nowrap;
}
.footer .btn-group {
  width: 100%;
}
/* 大屏下恢复原按钮尺寸 */
@media (min-width: 768px) {
  .footer .btn {
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
  }
}

HTML部分 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<footer class="footer">
  <div id="footer-controls" style="background-color: rgba(0, 0, 0, 0.05);">
    <div class="row no-gutters">
      <div class="col-5">
        <button type="reset" class="footer-buttons btn btn-danger btn-lg" form="user-control-form">Cancel</button>
      </div>
      <div class="col-2">
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-secondary w-50" id="btn-back-to-top">Return To Top</button>
          <button type="button" class="btn btn-info w-50">Info</button>
        </div>
      </div>
      <div class="col-5">
        <button type="button" class="footer-buttons btn btn-success btn-lg" onclick="onSave()">Save</button>
      </div>
    </div>
  </div>

  <div id="footer-banner" class="text-center p-4" style="background-color: green; display: none;">
    SAVED!
  </div>
</footer>

• 把所有col-sm-*替换为col-*：移除sm断点限制，全尺寸下保持三栏横向布局
• 给行容器加no-gutters类：去掉Bootstrap列默认的左右15px内边距，避免小屏下总宽度超出视口引发横向滚动
• 给中间按钮组内的两个按钮加w-50类、给按钮组设置100%宽度：让两个按钮平分中间列宽度，布局更均匀
• 新增响应式按钮样式：极小屏下缩小按钮内边距和字号，禁止文字折行，避免内容溢出；大屏下恢复原按钮大小，不影响桌面端显示效果

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