#html #css #responsive-design #bootstrap-4
#HTML #css #адаптивный дизайн #bootstrap-4
Вопрос:
Я работаю с последней версией Bootstrap 4 и пытаюсь сделать свою «группу списков» адаптивной. Я искал разные решения, но я не мог найти ничего, что я мог бы применить к моей проблеме.
Предполагается, что моя «группа списков» представляет собой вкладку, содержимое которой отображается слева. Хотя на рабочем столе это работает отлично, для мобильных устройств это не очень хорошо разработано, и, пока я искал решение, я понял, что выпадающее меню, показанное в верхней части содержимого, сработало бы. Я понятия не имею, как «преобразовать» мой список в выпадающий список, не нарушая его, хотя.
Вот как это выглядит сейчас, красный фон для выбранной вкладки и другой красный при наведении курсора: список-группа. Я бы хотел переместить его в верхнюю часть содержимого при просмотре с мобильных устройств, чтобы, когда я нажимаю на заголовок категории, я мог развернуть ее подменю.
Код такой:
<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’ в выпадающее меню, и после нажатия на него отображается соответствующий элемент.
Возможно, создание выпадающего меню только для маленьких экранов может помочь, но я не уверен, можно ли рассматривать это как реальное решение или скорее как неудачный ярлык.
Ответ №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!
Комментарии:
1. Большое вам спасибо за усилия, которые вы вложили в это! Результат менее привлекательный, чем ожидалось, хотя это и разочаровывает! Список слишком длинный, чтобы просто сохранять его в таком виде, как вы думаете, это хорошая идея, если я использую 2 меню, одно для рабочего стола и что-то вроде свернутого меню или аккордеона (чтобы я мог одновременно открывать только один свернутый элемент)? Я искал такого рода решения, и они выглядят так красиво, особенно accordion.
Ответ №2:
Поскольку ваш div группы списков занимает 3 из 12 столбцов на большом экране, почему бы вам не попробовать поместить col-sm-12?
Комментарии:
1. Это первое, о чем я подумал сразу после того, как задал вопрос. Проблема в том, что результат не такой приятный, как ожидалось, поскольку список довольно длинный, и мобильному пользователю пришлось бы много прокручивать, прежде чем прочитать, что было выбрано. Я ищу более удобное решение в виде свернутого меню или, еще лучше, в виде аккордеона. Хорошая ли идея иметь просто 2 разных списка, один для рабочего стола, а другой для устройств меньшего размера?