Я учусь использовать Bootstrap. В настоящее время я пробираюсь через макеты. Хотя Bootstrap довольно крутой, все, что я вижу, кажется устаревшим. На всю жизнь у меня есть базовый макет, который я не могу понять. Мой макет выглядит следующим образом:
---------------------------------------------------------------------------
| | | |
| | | |
| 240px | 160px | All Remaining Width of the Window |
| | | |
| | | |
--------------------------------------------------------------------------|
Эта сетка должна занимать всю высоту окна. Насколько я понимаю, мне нужно смешивать фиксированную и плавную ширину. Однако в Bootstrap 3.0 больше нет класса жидкости. Даже если бы это было так, я не могу понять, как смешивать жидкие и фиксированные размеры столбцов. Кто-нибудь знает, как это сделать в Bootstrap 3.0?
twitter-bootstrap
twitter-bootstrap-3
Узел Новичок
источник
источник
Ответы:
На самом деле нет простого способа смешать плавную и фиксированную ширину с Bootstrap 3. Это должно быть так, поскольку система сеток спроектирована так, чтобы быть гибкой и гибкой. Вы можете попробовать что-то взломать, но это будет противоречить тому, что пытается сделать система Responsive Grid, цель которой - заставить этот макет перетекать на разные типы устройств.
Если вам нужно придерживаться этого макета, я бы подумал о макете вашей страницы с помощью пользовательского CSS, а не с использованием сетки.
источник
edit: Поскольку многие люди, похоже, хотят это сделать, я написал краткое руководство с более общим вариантом использования здесь https://www.atlascode.com/bootstrap-fixed-width-sidebars/ . Надеюсь, поможет.
Система сеток bootstrap3 поддерживает вложение строк, что позволяет настраивать корневую строку, чтобы разрешить боковые меню фиксированной ширины.
Вам нужно добавить отступ слева в корневую строку, а затем создать дочернюю строку, которая содержит ваши обычные элементы макета сетки.
Вот как я обычно это делаю http://jsfiddle.net/u9gjjebj/
HTML
CSS
источник
position: fixed
означает, что при прокрутке содержимое этого столбца плавает над остальной частью страницы. В моем случае я исправил это с помощьюposition: absolute
.или используйте свойство отображения с таблицей-ячейкой;
CSS
HTML
http://jsfiddle.net/DnGDz/
источник
, becouse
display: table-cell` статьdisplay:block
...У меня была немного другая проблема:
В результате я обратился
float
к левому и правому столбцам, а затем мог использовать Bootstraprow
для создания промежуточных столбцов.источник
margin
иpadding
в моем ряду посередине, но это должна быть решаемая проблема. Каковы непредвиденные последствия такого подхода?Обновлено 2018
ИМО, лучший способ подойти к этому в Bootstrap 3 - это использовать медиа-запросы, которые совпадают с точками останова Bootstrap, чтобы вы использовали только столбцы фиксированной ширины на больших экранах, а затем позволяли макету реагировать на меньшие экраны. Таким образом вы сохраните отзывчивость ...
Working Bootstrap Fixed-Fluid Demo
Bootstrap 4 будет иметь flexbox, поэтому такие макеты будут намного проще: http://www.codeply.com/go/eAYKvDkiGw
источник
Хорошо, мой ответ очень хороший:
jsfiddle детская площадка
если вы хотите поддерживать все браузеры, используйте https://github.com/10up/flexibility
источник
ОБНОВЛЕНИЕ 2014-11-14: приведенное ниже решение слишком старое, я рекомендую использовать метод компоновки гибкого блока. Вот обзор: http://learnlayout.com/flexbox.html
Мое решение
HTML
СКС
Не изменяя слишком много кода макета начальной загрузки.
Обновление (не из OP): добавление фрагмента кода ниже, чтобы облегчить понимание этого ответа. Но похоже, что это не работает так, как ожидалось.
Показать фрагмент кода
источник
Почему бы просто не установить для двух левых столбцов фиксированное значение в вашем собственном CSS, а затем создать новый макет сетки из полных 12 столбцов для остального содержимого?
источник