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

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

结果如下：

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

Answer 1

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

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

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

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

Answer 2

尝试这样。

HTML

<div class="parent_div"> 
  <div class="row"></div>
  <div class="row"></div>
</div>