Bootstrap сетка: горизонтальная прокрутка отсутствует, когда все столбцы не помещаются в один ряд

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

bootstrap использовать процентную сетку, вы можете сделать это вручную, как:

.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>