引导网格:当所有列都不适合一行时，没有水平滚动。

Question

为什么不适合一行的列位于底部，而不是显示水平滚动条？

<div class="container-fluid main-container" style="overflow-x: auto; width:600px">
    <div class="row mx-5">
        <div class="col-6 col-sm-6 col-md-3 col-lg-3 mx-4 mt-12">
            ...column 1 content
        </div>
        <div class="col-6 col-sm-6 col-md-3 col-lg-3 mx-4 mt-12">
            ...column 2 content
        </div>
        <div class="col-6 col-sm-6 col-md-3 col-lg-3 mx-4 mt-12">
            ...column 3 content
        </div>
        <div class="col-6 col-sm-6 col-md-3 col-lg-3 mx-4 mt-12">
            ...column 4 content
        </div>
    </div>
</div>

预期行为：

如果4 div columns不适合一行，则应该显示一个horizontal scrollbar。

当前结果：

第4列位于column 1, column 2, and column 3的底部

对结果的印象：

​

​

Answer 1

您可以使用flex-nowrap类来实现目标。

​

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="container-fluid main-container" style="overflow-x: auto; width:600px">
    <div class="row mx-5 flex-nowrap">
        <div class="col-6 col-sm-6 col-md-3 col-lg-3 mx-4 mt-12">
            ...column 1 content
        </div>
        <div class="col-6 col-sm-6 col-md-3 col-lg-3 mx-4 mt-12">
            ...column 2 content
        </div>
        <div class="col-6 col-sm-6 col-md-3 col-lg-3 mx-4 mt-12">
            ...column 3 content
        </div>
        <div class="col-6 col-sm-6 col-md-3 col-lg-3 mx-4 mt-12">
            ...column 4 content
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

​

Answer 2

你为什么要用网格来做这个？

试着用旋转木马。https://flickity.metafizzy.co/options.html#freescroll

引导使用百分比网格，您可以手动完成它，例如：

​

.container {
  width: 100%;
  max-width: 600px;
  background: red;
  overflow-x: scroll;
}

.container .content {
  width: 820px;
}

.container .box {
  display: inline-block;
  width: 200px;
  height: 200px;
}

.container .box:nth-child(1) {
  background: blue;
}

.container .box:nth-child(2) {
  background: cyan;
}

.container .box:nth-child(3) {
  background: purple;
}

.container .box:nth-child(4) {
  background: gray;
}

<div class="container">
  <div class="content">
    <div class="box">
      1
    </div>
    <div class="box">
      2
    </div>
    <div class="box">
      3
    </div>
    <div class="box">
      4
    </div>
  </div>
</div>

​