你如何让引导列连续滚动而不是换行答案

【问题标题】：How do you make bootstrap columns in a row scroll instead of wrap你如何让引导列连续滚动而不是换行
【发布时间】：2021-03-07 13:24:31
【问题描述】：

为了清楚起见，我希望创建每行的列总数超过 12 列，使列成为可滚动的行。为了说明我的尝试，这里有一个例子。 html是：

<div class="container-fluid">
    <div class="row">
      <div class="col-3">
        This is
      </div>
      <div class="col-9">
        the first row
      </div>
    </div>

    <div class="row">
      <div class="col-6">
        This is
      </div>
      <div class="col-6">
        the second row
      </div>
    </div>
    <!-- This should scroll -->
    <div class="row schedule">
      <!-- This is the header row -->
      <div class="row">
        <div class="col-3">
          Employee Name:
        </div>
        <div class="col-3">
          First Day:
        </div>
        <div class="col-3">
          Second Day:
        </div>
        <div class="col-3">
          Third Day:
        </div>
        <div class="col-3">
          Fourth Day:
        </div>
        <div class="col-3">
          Fifth Day:
        </div>
        <div class="col-3">
          Sixth Day:
        </div>
        <div class="col-3">
          Seventh Day:
        </div>
        <div class="col-3">
          Totals:
        </div>
      </div>

    </div>

  </div>

css 很简单：

  .schedule{
          overflow: auto;
          white-space: nowrap;
          -webkit-overflow-scrolling: auto;

          background-color: lightblue;
      }

感谢您提前提供的任何帮助，

迈克

【问题讨论】：

标签： css bootstrap-4 scroll row

【解决方案1】：

我发现如果我对行有 flex-nowrap，我希望有滚动来解决这个问题。

【讨论】：

【解决方案2】：

试试这个：

<div class="container-fluid">
    <div class="row">
      <div class="col-3">
        This is
      </div>
      <div class="col-9">
        the first row
      </div>
    </div>
    <div class="row">
      <div class="col-6">
        This is
      </div>
      <div class="col-6">
        the second row
      </div>
    </div>
    <!-- This should scroll -->
    <div class="row schedule">
      <!-- This is the header row -->
      <div class="row">
        <div class="col-3">
          Employee Name:
        </div>
        <div class="col-3">
          First Day:
        </div>
        <div class="col-3">
          Second Day:
        </div>
        <div class="col-3">
          Third Day:
        </div>
        <div class="col-3">
          Fourth Day:
        </div>
        <div class="col-3">
          Fifth Day:
        </div>
        <div class="col-3">
          Sixth Day:
        </div>
        <div class="col-3">
          Seventh Day:
        </div>
        <div class="col-3">
          Totals:
        </div>
    </div>
    </div>
  </div>

CSS：

.schedule >.row{
    flex-wrap: nowrap!important;
    display: flex;
    flex-direction: row;
    background-color: lightblue;
 }

【讨论】：

感谢 Ahmad... 我发现如果我在每一行中添加 flex-nowrap 就可以了。但是当我在它们上面添加数据行时，每行中的列将不再排列。