Bootstrap4 добавляет прокрутку в div

Я использую штабелируемые таблетки внутри div. Проблема в том, что иногда в div содержится много таблеток. Как я могу добавить для нее полосу прокрутки?

<div class="row col-md-2">
<ul class="nav nav-pills nav-stacked">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>
</div>

Могу ли я добавить класс для div, чтобы сделать штабелированные таблетки прокручиваемыми?

Ответы

Ответ 1

Да, возможно ли, просто добавьте класс, как anyclass и дайте некоторый стиль CSS. Жить

.anyClass {
  height:150px;
  overflow-y: scroll;
}


.anyClass {
  height:150px;
  overflow-y: scroll;
}
<link href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css'; return false;" rel="stylesheet"/>

<div class=" col-md-2">
  <ul class="nav nav-pills nav-stacked anyClass">
    <li class="nav-item">
      <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li><li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li><li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li><li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li><li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</div>