разбиение страницы на 3 части с помощью Bootstrap

94
26 января 2020, 23:50

гуру бутстрапа подскажите можно ли в bootstrap разбить страницу следующим образом:

<div class = 'screen'>
    <nav class = 'menu'></nav>
    <div class = 'info'>
        <div class = 'left'></div>
        <div class = 'right'></div>
    </div>
</div>

где

.screen {
    width: 100vw;
    min-height: 100vh; 
}
.menu {
    width: 100%;
    height: 50px;
}
.info {
    min-height: calc(100vh - 50px);
}
.left {
    width: 250px; // тут возможные варианты
}
.right {
    width: calc(100% - 250px);
}

т.е. страница занимает весь экран (!), сверху во всю ширину экрана и заданной высотой меню, под меню слева одна панель заданной ширины, справа вторая панель.

Когда использовал классы bootstrap, то пришлось для высоты панелей сформировать свой стиль

Можно ли обойтись только бутстрапными?

Извиняюсь - только начал изучать данную библиотеку

P.S.

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

Answer 1

Бутстрап - это конструктор из готовых решений, он ограничен. Каждый из вас может построить «Свой Бутстрап». Если вы используйте Бутстрап, то вам никто не мешает комбинировать его базу со своими решениями.

READ ALSO
Задать стиль для двух кнопок по условию url

Задать стиль для двух кнопок по условию url

У меня есть две кнопки на странице b1 и b2

138
Container bootstrap убрать правый отступ?

Container bootstrap убрать правый отступ?

Интересная тут задачкаКлиент говорит чтобы у контейнера не было пустого места справа

122
Не работает ajax-запрос

Не работает ajax-запрос

Не работает ajax-запросНе чего не возвращает, alert() пустой

121