Контейнер для жидкости в бутстрапе 3

Как сделать контейнер для жидкости в бутстрап 3?

В bootstrap 2.3.2 .container-fluid класс есть. Но теперь в bootstrap 3 отсутствует, и существует только класс .container. Пожалуйста, помогите мне.

Ответ 1

Bootstrap 3.0 перешел на "мобильный первый" подход. .container действительно существует только там, где вам нужен/нужен квадратный макет. но если вы полностью освободите div.container-fluid, по умолчанию вы останетесь с жидким макетом.

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

<body>
  <header>...</header>
  <div style="padding:0 15px;"><!-- offset row negative padding -->
    <div class="row">
      <div class="col-md-6">50%</div>
      <div class="col-md-6">50%</div>
    </div>
  </div>
  <footer>...</footer>
</body>

Ответ 2

2.x .container-fluid был заменен на .container в Bootstrap 3.x(http://getbootstrap.com/getting-started/#migration), поэтому .container является текучим, но это не полная ширина.

Вы можете использовать row в качестве контейнера для жидкости, но вы должны немного изменить его, чтобы избежать горизонтальной полосы прокрутки. Выдержка из документов (http://getbootstrap.com/css/#grid)..

"Люди, которые хотят создать полностью жидкий макеты (это означает, что ваш сайт растягивает всю ширину окна просмотра) должен обернуть содержимое сетки в содержащий элемент с заполнением: 0 15px; для смещения поля: 0 -15px; используется на .rows."

Подробнее об изменениях в 3.x: http://bootply.com/bootstrap-3-migration-guide

Демо: http://bootply.com/91948

ОБНОВЛЕНИЕ для Bootstrap 3.1

container-fluid снова вернулся в Bootstrap 3.1. Теперь container-fluid можно использовать для создания макета полной ширины: http://www.bootply.com/116382

Ответ 3

Это было введено в v3.1.0: http://getbootstrap.com/css/#grid-example-fluid

Commit # 62736046 добавлена опция ".container-fluid для контейнеров и макетов полной ширины".

Ответ 4

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

.container-fluid > .row {
    margin-left: 0;
}

Далее я буду проверять, создает ли это какие-либо проблемы с другими макетами сетки с фиксированной шириной.

Ответ 5

Здесь есть хорошие ответы, поэтому я постараюсь избежать повторения себя со своими следующими пунктами по теме:

.container-fluid был удален в 3.0, но теперь он вернулся в 3.4 (эта информация находится в ответе, но я хотел ответить на него)
Чтобы получить последнюю версию, перейдите здесь или используйте Nuget.
Строки должны быть размещены внутри контейнера (фиксированной ширины) или жидкости-контейнера (полная ширина) для правильного выравнивания и заполнения.
Для получения последней информации о контейнере, пожалуйста, перейдите здесь для Bootstrap CSS