Полная ширина макета с twitter bootstrap

Я пытаюсь выполнить макет, похожий на этот: http://dribbble.com/shots/829195-Slate/attachments/86422

мой проект использует Twitter Bootstrap с адаптивным дизайном. Можно ли реализовать полную ширину макета с Bootstrap?

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

10 66
css twitter-bootstrap

10 ответов:

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

во-первых, это обман. Это не совсем жидкая ширина, но она, похоже, зависит от размера экрана, просматривающего сайт.

проблема с сайтами BS3 и fluid width заключается в том, что они приняли этот "мобильный первый" подход, который требует, чтобы они определяли каждую ширину экрана до того, что они считают рабочий стол (1200px) я работаю на ноутбуке с широким экраном 1900px - так что я в конечном итоге с 350px по обе стороны от контента в том, что BS3 думает, что это ширина рабочего стола.

они определили 10 Ширин экрана (на самом деле только 5, но в любом случае). Я не хочу изменять, потому что они являются общими ширины. Итак, я решил определить некоторые дополнительные ширины для BS на выбор при принятии решения о ширине класса контейнера.

способ, которым я использую BS, состоит в том, чтобы взять все Bootstrap предоставил меньше файлов, опустите переменные.меньше файлов, чтобы обеспечить мой собственный, и добавить один из моих собственных до конца, чтобы переопределить то, что я хочу изменить. В моем файле 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);
    }
}

эти два параметра задают пример того, что вам нужно сделать для достижения различной ширины экрана. Здесь вы получаете полную ширину в 1600px и 1900px. Любой меньше чем 1600-BS падает назад к ширине 1200px, после этого к 768px и так далее - вплоть до размера телефона.

Если у вас есть больше, чтобы поддержать, просто создайте больше @media screen заявления, как эти. Если вы создаете CSS вместо этого, вам нужно будет определить, какая ширина желоба была использована, и вычесть ее из ширины целевого экрана.

обновление: BS 3.0.1 и выше (до сих пор) - это так же просто, как установка @container-large-desktop на 100%

42

вы найдете отличный учебник здесь: bootstrap-3-grid-введение и ответ на ваш вопрос <div class="container-fluid"> ... </div>

124

обновление:

Bootstrap 3 был выпущен с тех пор, как на этот вопрос был первоначально дан ответ в январе, поэтому, если вы являетесь пользователем BS3, обратитесь к BS3 документация. Для тех, кто все еще находится на BS2, исходный ответ все еще применяется. Если вы заинтересованы в переключении с 2 на 3, см. миграция руководство.

оригинальный ответ:

из начальной загрузки 2 docs:

сделайте любую строку "жидкой" изменение.подряд .ряд-жидкость. Столбец классы остаются точно такими же, что позволяет легко переключаться между фиксированными и жидкие сетки.

код

<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

Это, в сочетании с установкой ширины вашего контейнера на значение жидкости, должно позволить вам получить желаемую компоновку.

12

начиная с последней начальной загрузки (3.1.x), способ достижения жидкого макета его использовать .container-fluid класса.

посмотреть Bootstrap grid для справки

7
*{
   margin:0
   padding:0
}

убедитесь, что ширина контейнера:%100

4

в Bootstrap 3, столбцы указываются в процентах. (В Bootstrap 2 это было только в том случае, если столбец/span находился в пределах .row-fluid элемент, но это больше не нужно, и этот класс больше не существует.) Если вы используете .container, тогда @Michael абсолютно прав, что вы застряли с макетом фиксированной ширины. Однако, вы должны быть в хорошей форме, если вы просто не используйте .элемент контейнера.

<body>
  <div class="row">
    <div class="col-lg-4">...</div>
    <div class="col-lg-8">...</div>
  </div>
</body>

поле для тела уже 0, так что вы должны быть в состоянии Встань прямо на край. (Столбцы по-прежнему имеют заполнение 15px с обеих сторон, поэтому вам, возможно, придется учитывать это в своем дизайне, но это не должно вас останавливать, и вы всегда можете настроить это при загрузке Bootstrap.)

4

просто создайте еще один класс и добавьте вместе с 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%;
}

надеюсь, это поможет, Спасибо!

4

вот пример 100% ширины, 100% высоты макета с Bootstrap 3.

http://bootply.com/tofficer/77686

3

самый простой способ с BS3-это сбросить максимальную ширину и заполнение, установленные BS3 CSS просто так. Вы снова получаете контейнер-жидкость:

.container{
  max-width:100%;
  padding:0;
}
2

Я думаю, что вы могли бы просто использовать класс "col-md-12" он требует левой и правой прокладки и 100% ширины. Похоже, это хорошая замена для контейнера-жидкости из 2-го бутстрапа.

-1