添加滚动条时如何修复未对齐的引导列

Question

我有一个标题，然后是一个包含类似信息行的 div。
当容器中的 div 适合而没有溢出时，它们会很好地对齐。

请看这里：Rows properly aligned

但是当有更多行并且容器在overflow:auto 上添加滚动条（我希望它这样做）时，行会失去对齐（我的猜测是因为滚动条占用了空间）

请看这里：Rows now unaligned to make space for scroll bar

我将在底部附上我正在使用的代码。 有谁知道我可以使用的解决方法，以便即使溢出并添加垂直滚动条，所有内容也会保持均匀对齐？我正在使用引导程序 4.6。

感谢您的帮助！

<div id="orders" class="summary">
  <div class="container-fluid">
    <div class="row">
      <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>
  <div class="container-fluid bg-light" style='height:20%; overflow:auto;'>
    <div id='orders-container'>
      <div class="row">
        <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 class="row">
        <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>

Answer 1

你可以用javascript得到document.documentElement的offsetWidth，然后减去第二个的clientWidth不包含滚动条的 rows 元素，这将为您提供滚动条宽度。然后在顶行放置一个类，将width 设置为使用视图宽度单位计算的测量值 => topEl.style.maxWidth = calc(100vw - ${scrollBarWidth})

JavaScript

let sbWidth = document.documentElement.offsetWidth - document.querySelectorAll('.row')[1].clientWidth;
const topEl = document.querySelector('.top')
topEl.style.width = `calc(100vw - ${sbWidth}px)`

HTML

<div class="container-fluid bg-light" style='height:20%; overflow:auto;'>
    <div id='orders-container'>
      <!--/ added class "top" to the first row /-->
      <div class="row 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 class="row">

或者，您可以将类静态添加到第一行，然后为该类添加 css，该类将介于 12 到 18 像素之间，但这不会那么准确。

.top {
  width: calc(100vw - 17px);
}