如何修复添加垂直滚动条后Bootstrap 4.6列错位不对齐的问题

你的错位问题确实是垂直滚动条占用容器宽度导致的：头部区域所在容器没有滚动条，内容区域出现滚动条后可用宽度小于头部容器，Bootstrap栅格按不同宽度计算列宽就会出现错位，以下是3种可行的解决方案，你可以根据兼容性需求选择：

方案1：用scrollbar-gutter预留滚动条位置（最简便，推荐） #

给内容区域的滚动容器添加scrollbar-gutter: stable样式，该属性会提前为容器预留滚动条位置，无论滚动条是否出现，内容可用宽度始终保持一致，直接适配所有现代浏览器：

<!-- 仅修改这一行的style属性即可 -->
<div class="container-fluid bg-light" style='height:20%; overflow:auto; scrollbar-gutter: stable;'>

方案2：头部固定+同一滚动容器（体验最优，兼容绝大多数浏览器） #

将头部和内容放到同一个滚动容器内，给头部添加sticky-top类实现滚动时固定在顶部，二者共享同一个容器的可用宽度，自然不会出现错位，同时还能优化滚动时的表头查看体验：

<div id="orders" class="summary">
  <div class="container-fluid bg-light" style='height:20%; overflow:auto;'>
    <!-- 头部区域，添加sticky-top实现吸顶 -->
    <div class="row sticky-top">
      <div class='col-2'><div class="col-12 h2 text-light font-weight-bold text-center bg-dark rounded pb-2 pt-2">Order #</div></div>
      <div class='col-1'><div class="col-12 h2 text-light font-weight-bold text-center bg-dark rounded pb-2 pt-2">Time</div></div>
      <div class='col-2'><div class="col-12 h2 text-light font-weight-bold text-center bg-dark rounded pb-2 pt-2">Name</div></div>
      <div class='col-2'><div class="col-12 h2 text-light font-weight-bold text-center bg-dark rounded pb-2 pt-2">Created By</div></div>
      <div class='col-1'><div class="col-12 h2 text-light font-weight-bold text-center bg-dark rounded pb-2 pt-2">Total</div></div>
      <div class='col-1'><div class="col-12 h2 text-light font-weight-bold text-center bg-dark rounded pb-2 pt-2">Sale</div></div>
      <div class='col-1'><div class="col-12 h2 text-light font-weight-bold text-center bg-dark rounded pb-2 pt-2">Status</div></div>
    </div>
    <!-- 内容区域 -->
    <div id='orders-container'>
      <!-- 原有内容行保持不变 -->
    </div>
  </div>
</div>

方案3：兼容老旧浏览器的手动适配 #

如果需要兼容IE等不支持scrollbar-gutter和position: sticky的老旧浏览器，可以手动给头部容器添加和滚动条宽度一致的右侧内边距，常规桌面端滚动条宽度为17px，你可以给头部的container-fluid添加如下样式：

#orders > .container-fluid {
  padding-right: 17px;
}

如果需要适配不同浏览器的滚动条宽度差异，可以用JS动态计算滚动条宽度后再赋值给头部的右侧内边距。

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