Как превратить группу списков в выпадающее меню с помощью Bootstrap 4?

Question

Я работаю с самой последней версией Bootstrap 4 и пытаюсь сделать мою «группу списков» отзывчивой. Я искал разные решения, но не смог найти ничего, что можно было бы применить к моей проблеме.

Моя 'list-group' должна быть вкладкой, содержимое которой показано слева. Хотя на настольном компьютере он работает отлично, он не очень хорошо разработан для мобильных устройств, и, ища решение, я понял, что выпадающее меню, отображаемое в верхней части содержимого, сработало бы. Я понятия не имею, как «преобразовать» мой список в выпадающий список, не нарушая его.

Вот как это выглядит сейчас: красный фон для выбранной вкладки и другой красный цвет при наведении: list-group . Я хотел бы переместить его в верхнюю часть его содержимого в режиме просмотра с мобильных устройств, поэтому, когда я нажимаю на заголовок категории, я могу развернуть его подменю.

Код такой:

<div class="col-xl-3 ">
      <div class="list-group list-group-flush" id="list-tab" role="tablist">

        <h4> Lorem Ipsum </h4>
        </br>
        <a class="list-group-item list-group-item-action active" id="list-who-list" data-toggle="list" href="#list-who" role="tab" aria-controls="who">dolor sit amet quo te</a>
        <a class="list-group-item list-group-item-action" id="list-info-list" data-toggle="list" href="#list-info" role="tab" aria-controls="info">lorem prompta deseruisse</a>
        </br>
        <h4> Mei ipsum neglegentur ex</h4>
        </br>
        <a class="list-group-item list-group-item-action" id="list-contact-list" data-toggle="list" href="#list-contact" role="tab" aria-controls="contact">est probo</a>
        <a class="list-group-item list-group-item-action" id="list-where-list" data-toggle="list" href="#list-where" role="tab" aria-controls="where">nusquam eu</a>
        </br>
        <h4> Quo solum soleat</h4>
        </br>
        <a class="list-group-item list-group-item-action" id="list-get-list" data-toggle="list" href="#list-get" role="tab" aria-controls="get">adversarium id</a>
        <a class="list-group-item list-group-item-action" id="list-send-list" data-toggle="list" href="#list-send" role="tab" aria-controls="send">qui ex minim discere</a>

    </div>
  </div>

Так что в основном, когда на маленьких экранах, таких как мобильный телефон / планшет, весь мой список должен идти вверху вкладки, превращая «h4» в выпадающее меню, и после щелчка на нем отображается соответствующий элемент.

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

Answer 1

Преобразовать вашу группу списков в выпадающий список довольно просто. То, что мы хотим закончить, похоже на выпадающее меню с заголовками в документации.

Сначала мы избавимся от list-group-flush и всех записей класса list-group-item-action. Далее мы переименовываем list-group в dropdown:

  <div class="col-xl-3 ">
      <div class="dropdown" id="list-tab" role="tablist">
        <h4> Lorem Ipsum </h4>
        </br>
        <a class="dropdown-item active" id="list-who-list" data-toggle="list" href="#list-who" role="tab" aria-controls="who">dolor sit amet quo te</a>
        <a class="dropdown-item" id="list-info-list" data-toggle="list" href="#list-info" role="tab" aria-controls="info">lorem prompta deseruisse</a>
        </br>
        <h4> Mei ipsum neglegentur ex</h4>
        </br>
        <a class="dropdown-item" id="list-contact-list" data-toggle="list" href="#list-contact" role="tab" aria-controls="contact">est probo</a>
        <a class="dropdown-item" id="list-where-list" data-toggle="list" href="#list-where" role="tab" aria-controls="where">nusquam eu</a>
        </br>
        <h4> Quo solum soleat</h4>
        </br>
        <a class="dropdown-item" id="list-get-list" data-toggle="list" href="#list-get" role="tab" aria-controls="get">adversarium id</a>
        <a class="dropdown-item" id="list-send-list" data-toggle="list" href="#list-send" role="tab" aria-controls="send">qui ex minim discere</a>
    </div>
  </div>  

Теперь первый dropdown или class="dropdown" должен стать class="dropdown-menu show", и мы собираемся добавить класс к заголовкам h4, а именно: class="dropdown-header".

  <div class="col-xl-3 ">
      <div class="dropdown-menu show" id="list-tab" role="tablist">
        <h4 class="dropdown-header"> Lorem Ipsum </h4>
        </br>
        <a class="dropdown-item active" id="list-who-list" data-toggle="list" href="#list-who" role="tab" aria-controls="who">dolor sit amet quo te</a>
        <a class="dropdown-item" id="list-info-list" data-toggle="list" href="#list-info" role="tab" aria-controls="info">lorem prompta deseruisse</a>
        </br>
        <h4 class="dropdown-header"> Mei ipsum neglegentur ex</h4>
        </br>
        <a class="dropdown-item" id="list-contact-list" data-toggle="list" href="#list-contact" role="tab" aria-controls="contact">est probo</a>
        <a class="dropdown-item" id="list-where-list" data-toggle="list" href="#list-where" role="tab" aria-controls="where">nusquam eu</a>
        </br>
        <h4 class="dropdown-header"> Quo solum soleat</h4>
        </br>
        <a class="dropdown-item" id="list-get-list" data-toggle="list" href="#list-get" role="tab" aria-controls="get">adversarium id</a>
        <a class="dropdown-item" id="list-send-list" data-toggle="list" href="#list-send" role="tab" aria-controls="send">qui ex minim discere</a>
    </div>
  </div>  

Это все, что нужно изменить, чтобы группа списков стала выпадающим меню, остальное можно оставить как есть.

NJoy!

Answer 2

Так как ваш div списка групп занимает 3 из 12 столбцов на большом экране, почему бы вам не попробовать поместить col-sm-12?