html - 如何在引导行中使水平滚动？（两排）

Question

如果我使用一排，它可以工作。看到这个脚本：

html：

<div class="testimonial-group">
  <div class="row">
    <div class="col-md-4">1</div>
    <div class="col-md-4">2</div>
    <div class="col-md-4">3</div>
    <div class="col-md-4">4</div>
    <div class="col-md-4">5</div>
    <div class="col-md-4">6</div>
    <div class="col-md-4">7</div>
    <div class="col-md-4">8</div>
    <div class="col-md-4">9</div>
  </div>
</div>

CSS：

.testimonial-group > .row {
  overflow-x: auto;
  flex-wrap: nowrap;
}

结果是这样的：

但是如果我使用两行，它就不起作用。存在两个滚动条。像这样的脚本：

html：

<div class="row">
    <div class="col-md-4">1</div>
    <div class="col-md-4">2</div>
    <div class="col-md-4">3</div>
    <div class="col-md-4">4</div>
    <div class="col-md-4">5</div>
    <div class="col-md-4">6</div>
    <div class="col-md-4">7</div>
    <div class="col-md-4">8</div>
    <div class="col-md-4">9</div>
  </div>
  <div class="row">
    <div class="col-md-4">1</div>
    <div class="col-md-4">2</div>
    <div class="col-md-4">3</div>
    <div class="col-md-4">4</div>
    <div class="col-md-4">5</div>
    <div class="col-md-4">6</div>
    <div class="col-md-4">7</div>
    <div class="col-md-4">8</div>
    <div class="col-md-4">9</div>
  </div>
</div>

CSS：

.testimonial-group > .row {
  overflow-x: auto;
  flex-wrap: nowrap;
}

结果是这样的：

存在两个滚动条。我只想要一个滚动条。我该怎么做？

标签： htmlcssscrollbootstrap-4row

Answer 1

溢出应该在父级而不是行上..

.testimonial-group {
  overflow-x: auto;
}

.testimonial-group > .row {
  flex-wrap: nowrap;
}

或者您可以简单地使用 Bootstrapoverflow-auto和flex-nowrap类： https ://www.codeply.com/go/5gtLhulVtk