Как реализовать этот сложный вложенный макет с помощью системы сеток Bootstrap 5? ⇐ Html
-
Anonymous
Как реализовать этот сложный вложенный макет с помощью системы сеток Bootstrap 5?
введите здесь описание изображения
Я пытаюсь практиковать свои навыки работы с сетками Bootstrap, копируя определенный макет из упражнения. У меня возникли проблемы с вложением и выравниванием боковых панелей (меню и боковые панели).
Вот макет, который мне нужно построить
Что я пробовал до сих пор:
Я понимаю, что Bootstrap использует систему с 12 столбцами. Я планирую использовать основной контейнер со строками, но у меня возникли проблемы:
1. Как сделать так, чтобы «Меню» занимало несколько строк слева.
2. Как правильно вложить «Статьи» в разделы.
3. Выравнивание двух столбцов «В стороне» справа от раздела 1.
Может ли кто-нибудь подсказать мне лучшую структуру (строки и столбцы) для достижения этой цели? В частности, следует ли мне использовать вложенные строки или основную строку с тремя большими столбцами (Меню | Содержание | Дополнительно)?
Подробнее здесь: https://stackoverflow.com/questions/798 ... rid-system
введите здесь описание изображения
Я пытаюсь практиковать свои навыки работы с сетками Bootstrap, копируя определенный макет из упражнения. У меня возникли проблемы с вложением и выравниванием боковых панелей (меню и боковые панели).
Вот макет, который мне нужно построить
Что я пробовал до сих пор:
Я понимаю, что Bootstrap использует систему с 12 столбцами. Я планирую использовать основной контейнер со строками, но у меня возникли проблемы:
1. Как сделать так, чтобы «Меню» занимало несколько строк слева.
2. Как правильно вложить «Статьи» в разделы.
3. Выравнивание двух столбцов «В стороне» справа от раздела 1.
Может ли кто-нибудь подсказать мне лучшую структуру (строки и столбцы) для достижения этой цели? В частности, следует ли мне использовать вложенные строки или основную строку с тремя большими столбцами (Меню | Содержание | Дополнительно)?
Подробнее здесь: https://stackoverflow.com/questions/798 ... rid-system
Мобильная версия