Как корректно вывести в 4 колонки bootstrap массив городов и регионов из базы?

Question

[jemanov]

Вывожу из базы массив вида:

Массив городов

Array
(
    [1] => Array
        (
            [region_name] => Адыгея
            [cities] => Array
                (
                    [306] => Майкоп
                    [307] => Абадзехская
                    [308] => Адыгейск
                    [309] => Белое
                    [310] => Блечепсин
                    [311] => Вольное
                    [312] => Гиагинская
                    [313] => Дондуковская
                    [314] => Каменномостский
                    [315] => Кошехабль
                    [316] => Красногвардейское
                    [317] => Краснооктябрьский
                    [318] => Кужорская
                    [319] => Натырбово
                    [320] => Понежукай
                    [321] => Северо-Восточные Сады
                    [322] => Тахтамукай
                    [323] => Тлюстенхабль
                    [324] => Тульский
                    [325] => Хакуринохабль
                    [326] => Ханская
                    [327] => Хатукай
                    [328] => Ходзь
                    [329] => Энем
                    [330] => Яблоновский
                )

        )

    [22] => Array
        (
            [region_name] => Алтайский край
            [cities] => Array
                (
                    [331] => Барнаул
                    [332] => Алейск
                    [333] => Алтайское
                    [334] => Баево
                    [335] => Белокуриха
                    [336] => Белоярск
                    [337] => Берёзовка
                    [338] => Бийск
                    [339] => Благовещенка
                    [340] => Боровиха
                    [341] => Бурла
                    [342] => Быстрый Исток
                    [343] => Верх-Катунское
                    [344] => Власиха
                    [345] => Волчиха
                    [346] => Горняк
                    [347] => Ельцовка
                    [348] => Завьялово
                    [349] => Залесово
                    [350] => Заринск
                    [351] => Змеиногорск
                    [352] => Зональное
                    [353] => Зудилово
                    [354] => Калманка
                    [355] => Камень-на-Оби
                    [356] => Ключи
                    [357] => Косиха
                    [358] => Красногорское
                    [359] => Краснощёково
                    [360] => Крутиха
                    [361] => Кулунда
                    [362] => Курья
                    [363] => Кытманово
                    [364] => Лебяжье
                    [365] => Леньки
                    [366] => Малиновое Озеро
                    [367] => Мамонтово
                    [368] => Михайловское
                    [369] => Налобиха
                    [370] => Новичиха
                    [371] => Новоалтайск
                    [372] => Новоегорьевское
                    [373] => Новые Зори
                    [374] => Озерки
                    [375] => Павловск
                    [376] => Панкрушиха
                    [377] => Первомайское
                    [378] => Поспелиха
                    [379] => Ребриха
                    [380] => Родино
                    [381] => Романово
                    [382] => Рубцовск
                    [383] => Сибирский
                    [384] => Славгород
                    [385] => Смоленское
                    [386] => Советское
                    [387] => Соколово
                    [388] => Солонешное
                    [389] => Солтон
                    [390] => Сростки
                    [391] => Староалейское
                    [392] => Степное Озеро
                    [393] => Табуны
                    [394] => Тальменка
                    [395] => Тогул
                    [396] => Топчиха
                    [397] => Троицкое
                    [398] => Тюменцево
                    [399] => Угловское
                    [400] => Усть-Калманка
                    [401] => Усть-Чарышская Пристань
                    [402] => Хабары
                    [403] => Целинное
                    [404] => Чарышское
                    [405] => Черемное
                    [406] => Шелаболиха
                    [407] => Шипуново
                    [408] => Южный
                    [409] => Яровое
                )

        )
// итд 80 регионов

Делаю так, но строки 10-14 как то не красиво выглядят.

<div class="row ml-0 mt-3">
	<div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mt-3 pl-0">
		<? foreach($geo as $region_id=>$region): ?>
			 <div class="p-1 pl-2 mt-2 mb-1 region-name" region_id="<?=$region_id;?>"><?=$region['region_name'];?></div>
			 <div class="pl-2 city-name" region_id="<?=$region_id;?>">
				 <? foreach($region['cities'] as $city_id=>$city_name): ?>
				 	<A href="./city<?=$city_id;?>"><?=$city_name;?></A><BR>
				 <? endforeach; ?>
			</div> 
			<? $n++; if($n == 21):?>
				</div><div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mt-3 pl-0">
				<? unset($n); ?>
			<? endif; ?>	
		<? endforeach; ?>		 
	</div>	
</div>

Как быть? Если каждый регион оборачиваю в отдельный блок (отказываюсь от 4 основных колонок, то при раскрытии городов в регионах сосендние тоже съезжают а там пусто.

Как это делают профессионалы?
Чтобы и функционал остался и код красивый...

Answer 1

[Арсений Матыцин]

Оборачивать каждый в .col-lg-3, не забывая про перестройку до одной колонки для телефонов. Все в один .row.

Вариант для экстрималов — многоколоночный текст. Но он не жрет блочные элементы, это значит, что если у текста будет обертка, то она может перенестись на другую колонку. Это можно исправить, но задача, как я сказал — для экстримального времяпровождения)

Comments

[jemanov]

Если я оборачиваю каждый "как я писал выше", то при открытии одного блока, соседние тоже увеличиваются в высоту.

[Арсений Матыцин]

jemanov, да-да, это из-за флекбоксов. Можно принудительно сделать из них блоки .d-block. Или поиграться с классами утилит.

Answer 2

[Андрей]

Я бы сделал с помощью Dropdowns с ограничением по высоте и вертикальной прокруткой в в одном контейнере с .d-flex

А можно сделать на Select`е

Comments

[jemanov]

На селекте тоже вариант, особенно когда есть чего вставлять на главную (или как фильтры, когда сразу контент) но там пусто на главной вот и решил ее усеять регионами да городами.