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如果没有长文本就不能在一行中换行。< / p>

＆＃13;

.card {
overflow-x: scroll;
white-space: nowrap;
max-width: 150px;
padding: 1rem;
}

＆＃13;

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

＆＃13;

Bootstrap 4水平滚动与卡组

1 个答案: