Я пытаюсь выполнить макет, подобный этому: http://dribbble.com/shots/829195-Slate/attachments/86422
Мой проект использует Twitter Bootstrap с отзывчивым дизайном. Можно реализовать макет полной ширины с помощью Bootstrap?
Проблема в том, что из того, что я читал, макеты жидкостей будут удалены в bootstrap 3.0, а отзывчивый дизайн имеет фиксированную ширину.
Поскольку принятый ответ не находится на той же планете, что и BS3, я поделюсь тем, что использую для достижения почти полной ширины.
Во-первых, это обман. Это не совсем текущая ширина - но, похоже, это зависит от размера экрана, просматривающего сайт.
Проблема с узлами ширины BS3 и ширины жидкости заключается в том, что они взяли этот "мобильный первый" подход, который требует, чтобы они определяли каждую ширину экрана, равную тому, что они считают рабочим (1200 пикселей). Я работаю на ноутбуке с широким экраном шириной 1900 пикселей - так что в итоге я получаю 350 пикселей по обе стороны от содержимого, на что, по мнению BS3, ширина рабочего стола.
Они определили 10 ширины экрана (действительно только 5, но в любом случае). Мне не очень удобно менять их, потому что они являются общей шириной. Таким образом, я решил определить некоторые дополнительные ширины для выбора BS, если вы решите ширину класса контейнера.
То, как я использую BS, - это взять все файлы, предоставленные Bootstrap LESS, опустить файл variables.less для предоставления моего собственного и добавить один из моих собственных до конца, чтобы переопределить то, что я хочу изменить. В моем меньшем файле я добавляю следующее, чтобы достичь 2 общих настроек ширины экрана:
@media screen and (min-width: 1600px) {
.container {
max-width: (1600px - @grid-gutter-width);
}
}
@media screen and (min-width: 1900px) {
.container {
max-width: (1900px - @grid-gutter-width);
}
}
Эти две настройки задают пример того, что вам нужно сделать для достижения различной ширины экрана. Здесь вы получаете полную ширину при 1600 пикселей и 1900 пикселей. Любое меньше 1600 - BS возвращается к ширине 1200 пикселей, затем до 768 пикселей и т.д. - вплоть до размера телефона.
Если у вас есть больше возможностей для поддержки, просто создайте более синтаксические инструкции @media, подобные этим. Если вы создаете CSS вместо этого, вам нужно определить, какая ширина желоба была использована, и вычесть его из целевой ширины экрана.
Обновление: BS 3.0.1 и выше (до сих пор) - это так же просто, как установка @container-large-desktop на 100%
Здесь вы найдете отличный учебник: bootstrap-3-grid-introduction и ответ на ваш вопрос: <div class="container-fluid"> ... </div>
Bootstrap 3 выпущен, так как этот вопрос был первоначально отвечен в январе, поэтому, если вы являетесь пользователем BS3, обратитесь к документации BS3 , Для тех, кто еще на BS2, исходный ответ по-прежнему применяется. Если вас интересует переход от 2 до 3, см. Руководство migration.
Из бутстрапа 2 docs:
Сделайте любую строку "жидкость", изменив ее. Колонка классы остаются точно такими же, что позволяет легко переключаться между фиксированными и жидкостные решетки.
код
<div class="row-fluid">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
Это, в сочетании с установкой ширины контейнера в значение текучей среды, должно позволить вам получить желаемый макет.
Начиная с последней версии Bootstrap (3.1.x), для достижения макета жидкости использовать класс .container-fluid.
Смотрите Загрузочная сетка для справки
*{
margin:0
padding:0
}
убедитесь, что ширина вашего контейнера:% 100
В Bootstrap 3 столбцы указаны с использованием процентов. (В Bootstrap 2 это было только в том случае, если столбец /span находился внутри элемента .row-fluid, но больше не нужен, и этот класс больше не существует.) Если вы используете .container, то @Michael абсолютно прав что вы будете придерживаться макета фиксированной ширины. Однако вы должны быть в хорошей форме, если просто не используете элемент .container.
<body>
<div class="row">
<div class="col-lg-4">...</div>
<div class="col-lg-8">...</div>
</div>
</body>
Поля для тела уже равна 0, поэтому вы можете встать прямо к краю. (Столбцы по-прежнему имеют прописку 15px с обеих сторон, поэтому вам, возможно, придется учитывать это в своем дизайне, но это не должно вас останавливать, и вы всегда можете настроить это при загрузке Bootstrap.)
Просто создайте другой класс и добавьте вместе с классом bootstrap container. Вы также можете использовать container-fluid.
<div class="container full-width">
<div class="row">
....
</div>
</div>
Часть CSS довольно проста
* {
margin: 0;
padding: 0;
}
.full-width {
width: 100%;
min-width: 100%;
max-width: 100%;
}
Надеюсь, это поможет, спасибо!
Вот пример 100% -ной ширины, 100% -ной компоновки высот с Bootstrap 3.
Самый простой способ с BS3 - это reset max-width и padding, установленный BS3 CSS, просто так. Вы снова получаете контейнерную жидкость:
.container{
max-width:100%;
padding:0;
}
Я думаю, вы могли бы просто использовать класс "col-md-12", для этого потребовались левая и правая прокладки и 100% ширина. Похоже, это хорошая замена для контейнерной жидкости из второго бутстрапа.