☰

Bootstrap4 divにスクロールバーを追加する 質問する

tag-icon • tag-icon bootstrap-4
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="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" 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>

おすすめ記事