带卡片组的 Bootstrap 4 水平滚动

【问题标题】：Bootstrap 4 horizontal scroll with card-group带卡片组的 Bootstrap 4 水平滚动
【发布时间】：2018-10-30 07:15:29
【问题描述】：

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

【问题讨论】：

对于水平滚动，使用overflow-x，而不是overflow-y。它也不起作用，因为card 是响应式的。您需要避免它才能使其发挥作用。
我该怎么做

标签： css twitter-bootstrap sass bootstrap-4

【解决方案1】：

首先你需要为水平滚动添加overflow-x，那么你应该有一个max-width，在它之后会出现滚动功能，因为它是文本，所以如果它不是长文本，你应该white-space no wrap 在一行中。

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

【讨论】：

谢谢。如何在滚动条和 do 之间留出边距。以及如何更改悬停时的高度
@Guz，你只需添加填充，我已经用填充更新了答案