时间戳

首页 > 解决方案 > 带卡片组的 Bootstrap 4 水平滚动

css - 带卡片组的 Bootstrap 4 水平滚动

问题描述

我正在使用 bootstrap 4、Angular 和 SCSS

我的以下卡组是这样的：

<div class="row">
      <div class="list">
            <div class="card-group">
                <div class="card" ng-repeat="">
                   data components are here
                </div>
            </div>
      </ul>   
</div>

我没有设法创建一个滚动条，一个水平滚动条，而不是卡片组的响应行为。

我试图添加overflow-y:scroll，但它不适用于水平。

标签： csstwitter-bootstrapsassbootstrap-4

解决方案

首先，您需要添加overflow-x水平滚动，然后您应该max-width在它之后出现滚动功能，并且因为它是文本，所以white-space如果它不是长文本，您不应该在一行中换行。

.card {
overflow-x: scroll;
white-space: nowrap;
max-width: 150px;
padding: 1rem;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<div class="row">
      <div class="list">
            <div class="card-group">
                <div class="card" ng-repeat="">
                   data components are here
                </div>
            </div>
      </ul>   
</div>

推荐阅读