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

【问题标题】：How can I make horizontal scrollable in a bootstrap row? (two row)如何在引导行中使水平滚动？（两排）
【发布时间】：2019-12-08 21:36:20
【问题描述】：

如果我使用一行，它可以工作。请参阅此脚本：

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

结果如下：

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

【问题讨论】：

标签： html css scroll bootstrap-4 row

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

像这样试试..

HTML

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

【讨论】：