引导程序 4 中的水平滚动

Question

我正在尝试为一些用于移动视图的卡片进行水平滚动@media only screen and (max-width : 480px)。我在这里阅读了其他帖子，包括这个帖子，但似乎没有一个对我有用。我想我可能存在的问题之一是现在我的卡片叠在一起。

这就是我现在所拥有的：

这就是我需要实现的目标：

.mobile-card-container {
  display: block;
}

.card-background {
  background-color: #ffffff;
  border-radius: 6px;
  margin-top: 16px;
  height: 100px;
  -webkit-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);
  -moz-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);
  box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div class="row">
  <!-- Mobile Card Container -->
  <div class="col-12 mobile-card-container">
    <div class="row">
      <!-- Card 48 cuotas -->
      <div class="col-10 card-background simulacion mx-auto" style="border: 1px solid red;">
        Card content
      </div>
      <!-- /Card 48 cuotas -->
      <!-- Card 36 cuotas-->
      <div class="col-10 card-background simulacion mx-auto" style="border: 1px solid blue;">
        Card Content
      </div>
      <!-- /Card 36 cuotas -->
      <!-- Card 24 cuotas -->
      <div class="col-10 card-background simulacion mx-auto" style="border: 1px solid green;">
        Card Content
      </div>
    </div>
  </div>
</div>

Answer 1

要解决这个问题，您必须更改 Bootstrap 类的默认行为。对于最小的媒体屏幕，我们必须在卡片容器上使用flex-nowrap并将overflow-x样式更改为auto。总之，我们将使用以下主要更改：

CSS

@media only screen and (max-width : 576px)
{
  .mobile-card-container > .row {
    overflow-x: auto;
  }
}

请注意，我用于max-width: 576px与当前的Bootstrap Breakpoints兼容。

HTML 结构

<!-- Mobile Card Container -->
<div class="container-fluid mobile-card-container">
  <div class="row text-center flex-nowrap flex-sm-wrap">
    <!-- Cards will be here -->
  </div>
</div>

因此，对于XS屏幕设备，flex-nowrap该类将与之前定义的样式一起应用，接近您搜索的位置。在其他类型的屏幕（SM, MD, LG）上，Bootstrap 类的默认行为将被保留（注意flex-sm-wrap类的用法）。

最后，您可以查看下一个工作示例（在全屏模式下调整窗口大小）：

@media only screen and (max-width : 576px)
{
  .mobile-card-container > .row {
    overflow-x: auto;
  }
}

<!-- Mobile Card Container -->
<div class="container-fluid mobile-card-container">
  <div class="row text-center flex-nowrap flex-sm-wrap">
    <!-- Cards will be here -->
  </div>
</div>