Question

我想在下面的代码中使用Bootstrap 4进行水平滚动，但是我无法做到

<div class="scroll-horz">
  <div class="row">
    <div class="col-md-4"> Test </div>
    <div class="col-md-4"> Test </div>
    <div class="col-md-4"> Test </div>
    <div class="col-md-4"> Test </div>
    <div class="col-md-4"> Test </div>     
  </div>
<div class="row">
    <div class="col-md-4"> Test </div>
    <div class="col-md-4"> Test </div>
    <div class="col-md-4"> Test </div>
    <div class="col-md-4"> Test </div>
    <div class="col-md-4"> Test </div>     
  </div>
</div>

Answer 1

只需尝试如下所示，

HTML：

<div class="scroll-horz">
  <div class="row">
    <div class="col-md-4"> Test </div>
    <div class="col-md-4"> Test </div>
    <div class="col-md-4"> Test </div>
    <div class="col-md-4"> Test </div>
    <div class="col-md-4"> Test </div>     
  </div>
  <div class="row">
    <div class="col-md-4"> Test </div>
    <div class="col-md-4"> Test </div>
    <div class="col-md-4"> Test </div>
    <div class="col-md-4"> Test </div>
    <div class="col-md-4"> Test </div>     
  </div>
</div>

CSS：

.scroll-horz > .row {
  overflow-x: auto;
  white-space: nowrap;
}
.scroll-horz > .row > .col-md-4 {
  display: inline-block;
  float: none;
}

我想在Bootstrap 4中水平滚动

1 个答案: