Как сделать горизонтальную прокрутку Bootstrap list-group или list-group-horizontal со страницы, чтобы лучше разместить длинные списки?
Здесь вы видите мои list-group-horizontal ...
А вот код, хотя для краткости вырезано много предметов ...
<ul class="list-group list-group-horizontal row px-3 pb-3">
<a href="http://www.contexthq.com/organisation/acellere/" class="list-group-item list-group-item-action text-primary d-flex justify-content-between align-items-center col-12 col-sm-6 col-md-4">
<span>
<img src="https://www.google.com/s2/favicons?domain=acellere.com" alt="Acellerelogo logo" width="16" class="mr-1 bg-white"> Acellere </span>
<span class="badge badge-secondary badge-pill">2</span>
</a>
<a href="http://www.contexthq.com/organisation/adyoulike/" class="list-group-item list-group-item-action text-primary d-flex justify-content-between align-items-center col-12 col-sm-6 col-md-4">
<span>
<img src="https://www.google.com/s2/favicons?domain=adyoulike.com" alt="adyoulikelogo logo" width="16" class="mr-1 bg-white"> adyoulike </span>
<span class="badge badge-secondary badge-pill">9</span>
</a>
<a href="http://www.contexthq.com/organisation/anterra/" class="list-group-item list-group-item-action text-primary d-flex justify-content-between align-items-center col-12 col-sm-6 col-md-4">
<span>
<img src="https://www.google.com/s2/favicons?domain=anterra.com" alt="Anterralogo logo" width="16" class="mr-1 bg-white"> Anterra </span>
<span class="badge badge-secondary badge-pill">1</span>
</a>
<a href="http://www.contexthq.com/organisation/backbase/" class="list-group-item list-group-item-action text-primary d-flex justify-content-between align-items-center col-12 col-sm-6 col-md-4">
<span>
<img src="https://www.google.com/s2/favicons?domain=backbase.com" alt="Backbaselogo logo" width="16" class="mr-1 bg-white"> Backbase </span>
<span class="badge badge-secondary badge-pill">2</span>
</a>
<a href="http://www.contexthq.com/organisation/bijou-commerce/" class="list-group-item list-group-item-action text-primary d-flex justify-content-between align-items-center col-12 col-sm-6 col-md-4">
<span>
<img src="https://www.google.com/s2/favicons?domain=bijoucommerce.com" alt="Bijou Commercelogo logo" width="16" class="mr-1 bg-white"> Bijou Commerce </span>
<span class="badge badge-secondary badge-pill">3</span>
</a>
<a href="http://www.contexthq.com/organisation/billfront/" class="list-group-item list-group-item-action text-primary d-flex justify-content-between align-items-center col-12 col-sm-6 col-md-4">
<span>
<img src="https://www.google.com/s2/favicons?domain=billfront.com" alt="BillFrontlogo logo" width="16" class="mr-1 bg-white"> BillFront </span>
<span class="badge badge-secondary badge-pill">4</span>
</a>
<a href="http://www.contexthq.com/organisation/birdsong-analytics/" class="list-group-item list-group-item-action text-primary d-flex justify-content-between align-items-center col-12 col-sm-6 col-md-4">
<span>
<img src="https://www.google.com/s2/favicons?domain=birrdsonganalytics.com" alt="Birdsong Analyticslogo logo" width="16" class="mr-1 bg-white"> Birdsong Analytics </span>
<span class="badge badge-secondary badge-pill">9</span>
</a>
<a href="http://www.contexthq.com/organisation/blacklane/" class="list-group-item list-group-item-action text-primary d-flex justify-content-between align-items-center col-12 col-sm-6 col-md-4">
<span>
<img src="https://www.google.com/s2/favicons?domain=blacklane.com" alt="Blacklanelogo logo" width="16" class="mr-1 bg-white"> Blacklane </span>
<span class="badge badge-secondary badge-pill">1</span>
</a>
<a href="http://www.contexthq.com/organisation/blueid/" class="list-group-item list-group-item-action text-primary d-flex justify-content-between align-items-center col-12 col-sm-6 col-md-4">
<span>
<img src="https://www.google.com/s2/favicons?domain=blueid.net" alt="BlueIDlogo logo" width="16" class="mr-1 bg-white"> BlueID </span>
<span class="badge badge-secondary badge-pill">1</span>
</a>
<a href="http://www.contexthq.com/organisation/boomads/" class="list-group-item list-group-item-action text-primary d-flex justify-content-between align-items-center col-12 col-sm-6 col-md-4">
<span>
<img src="https://www.google.com/s2/favicons?domain=boomads.com" alt="Boomadslogo logo" width="16" class="mr-1 bg-white"> Boomads </span>
<span class="badge badge-secondary badge-pill">2</span>
</a>
<a href="http://www.contexthq.com/organisation/boomapp/" class="list-group-item list-group-item-action text-primary d-flex justify-content-between align-items-center col-12 col-sm-6 col-md-4">
<span>
<img src="https://www.google.com/s2/favicons?domain=boom-app.com" alt="boomApplogo logo" width="16" class="mr-1 bg-white"> boomApp </span>
<span class="badge badge-secondary badge-pill">2</span>
</a>
<a href="http://www.contexthq.com/organisation/cedato/" class="list-group-item list-group-item-action text-primary d-flex justify-content-between align-items-center col-12 col-sm-6 col-md-4">
<span>
<img src="https://www.google.com/s2/favicons?domain=cedato.com" alt="Cedatologo logo" width="16" class="mr-1 bg-white"> Cedato </span>
<span class="badge badge-secondary badge-pill">5</span>
</a>
<a href="http://www.contexthq.com/organisation/celery/" class="list-group-item list-group-item-action text-primary d-flex justify-content-between align-items-center col-12 col-sm-6 col-md-4">
<span>
<img src="https://www.google.com/s2/favicons?domain=https://www.gocelery.com/" alt="Celerylogo logo" width="16" class="mr-1 bg-white"> Celery </span>
<span class="badge badge-secondary badge-pill">1</span>
</a>
<a href="http://www.contexthq.com/organisation/centric/" class="list-group-item list-group-item-action text-primary d-flex justify-content-between align-items-center col-12 col-sm-6 col-md-4">
<span>
<img src="https://www.google.com/s2/favicons?domain=centric.eu" alt="Centriclogo logo" width="16" class="mr-1 bg-white"> Centric </span>
<span class="badge badge-secondary badge-pill">1</span>
</a>
</ul>
Это слишком долго, и это и даже не самый длинный list-group-horizontal на моем сайте.
Вместо этого я хотел бы пролистать список справа от страницы, чтобы показать его на свитке. Я думаю, что это переполнение.
Итак, область просмотра будет отображать три col-lg-4 столбца, каждый из которых будет содержать 12 элементов списка. Только 26 будет видно на экране. Затем пользователь прокручивает вправо, чтобы отобразить дополнительные столбцы 12.
Я рассмотрел:
- Добавление
flex-column - возможно, сложение нескольких col-lg-4 flex-column столбцов. - Аналогично, несколько стандартных групп-списков, не горизонтальных и поэтому не с
flex-column.
Проблемы, которые я могу себе представить:
- Направление алфавитного потока. В отличие от этого списка-группы-горизонтали, который передает lr и переносит на следующую строку ... если строка
list-group-horizontal охватывает ширину страницы и принимает алфавитный алфавитный отступ за пределами страницы, это было бы плохо. Я предполагаю, что алфавитный порядок должен быть сверху вниз от столбца 1, то же самое для столбца 2, то же самое для столбца 3 и т. Д. c. - Отзывчивость: при
sm столбцы на экране должны быть равны 2 На xs все это должен быть один столбец без горизонтальной прокрутки.