时间戳

首页 > 解决方案 > 我想在引导程序 4 中水平滚动

html - 我想在引导程序 4 中水平滚动

问题描述

我想在下面的代码中在 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>

标签： htmlcssbootstrap-4

解决方案

只需尝试如下所示，

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

推荐阅读