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

Question

我有一个头，然后是一个包含相似信息行的div。

当容器中的div适合而没有溢出时，它们可以很好地对齐。

查看此处：Rows properly aligned

但是当有更多的行，并且容器在overflow:auto上添加了一个滚动条(我希望这样做)时，行失去了对齐(我猜是因为滚动条占用了太多空间)。

查看此处：Rows now unaligned to make space for scroll bar

我将附加我在底部使用的代码。有没有人知道一种解决方法，我可以使用它，使所有内容将保持均匀对齐，即使它溢出并添加垂直滚动条？我使用的是bootstrap 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元素的，这个元素没有包含滚动条，这就得到了滚动条的宽度。然后在顶行放置一个类，使用视图宽度单位=> topEl.style.maxWidth = calc(100vw - ${scrollBarWidth})将width设置为计算出的测量值

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);
}