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>