如何在行滚动中生成引导列而不是换行

Question

为了清楚起见，我希望创建列总数超过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;
      }

我很感谢你提前给我的帮助，

麦克

Answer 1

我发现，如果我有flex-nowrap到行，我希望有解决问题的滚动。

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