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

Question

我正在使用 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，但它不适用于水平方向。

Answer 1

首先您需要添加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>