Укажите номер элемента на панели с полосой прокрутки

Question

Вот изображение того, что у меня сейчас есть:

Проблема в том, что я не знаю, как сделать его меньше, и затем используйте полосу прокрутки, чтобы увидеть другие элементы.

Я использую Bootstrap и вот мой код:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384- 
      MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="col-2 mt-4">
  <p class="text-center mt-5">Matériel souhaité</p>
  <div class="list-group" id="list-tab" role="tablist" style="overflow-y:scroll">
    <a class="list-group-item list-group-item-action" data-toggle="list" role="tab">Ordi 1</a>
    <a class="list-group-item list-group-item-action" data-toggle="list" role="tab">Ordi 2</a>
    <a class="list-group-item list-group-item-action" data-toggle="list" role="tab">Ordi 3</a>
    <a class="list-group-item list-group-item-action" data-toggle="list" role="tab">Ordi 4</a>
    <a class="list-group-item list-group-item-action" data-toggle="list" role="tab">Ordi 1</a>
    <a class="list-group-item list-group-item-action" data-toggle="list" role="tab">Ordi 3</a>
    <a class="list-group-item list-group-item-action" data-toggle="list" role="tab">Ordi 4</a>
    <a class="list-group-item list-group-item-action" data-toggle="list" role="tab">Ordi 1</a>
    <a class="list-group-item list-group-item-action" data-toggle="list" role="tab">Ordi 3</a>
    <a class="list-group-item list-group-item-action" data-toggle="list" role="tab">Ordi 4</a>
    <a class="list-group-item list-group-item-action" data-toggle="list" role="tab">Ordi 1</a>
  </div>
</div>

Answer 1

вы можете использовать что-то подобное

   <div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button"  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" >
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>