Контейнер-жидкость против контейнера

Ответ 1

Быстрая версия: .container имеет одну фиксированную ширину для каждого размера экрана в бутстрапе (xs, sm, md, lg); .container-fluid расширяется, чтобы заполнить доступную ширину.

Разница между container и container-fluid исходит из этих строк CSS:

@media (min-width: 568px) {
  .container {
    width: 550px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

В зависимости от ширины окна просмотра, просматриваемого веб-страницей, класс container дает свой div определенной фиксированной ширине. Эти строки не существуют в любой форме для container-fluid, поэтому ее ширина изменяется при каждом изменении ширины видового экрана.

Итак, скажем, ваше окно браузера имеет ширину 1000 пикселей. Чем больше min-ширина 992px, ваш элемент .container будет иметь ширину 970 пикселей. Затем вы постепенно расширяете окно браузера. Ширина вашего .container не изменится, пока вы не достигнете 1200 пикселей, при этом он будет прыгать до 1170 пикселей в ширину и останется таким образом для увеличения ширины браузера.

С другой стороны, ваш элемент .container-fluid будет постоянно изменяться, поскольку вы вносите даже самые незначительные изменения в ширину вашего браузера.

Ответ 2

Я думаю, вы говорите, что container vs container-fluid - разница между отзывчивым и не реагирующим на сетку. Это неправда... то, что говорят, что ширина не фиксирована... ее полная ширина!

Это трудно объяснить, поэтому рассмотрим примеры

Пример 1

container-fluid:

http://www.bootply.com/119981

Итак, вы видите, как контейнер занимает весь экран... что container-fluid.

Теперь давайте посмотрим на другой только обычный container и посмотрим на грани предварительного просмотра

Пример 2

container

http://www.bootply.com/119982

Теперь вы видите пробел в примере? Это потому, что его фиксированная ширина container! Возможно, имеет смысл открыть оба примера в двух разных вкладках и переключиться туда и обратно.

ИЗМЕНИТЬ

Еще лучше вот пример с обоими контейнерами сразу! Теперь вы можете сказать разницу!

http://www.bootply.com/119983

Надеюсь, это помогло немного разъяснить!

Ответ 3

Оба .container и .container-fluid реагируют (т.е. меняют компоновку на основе ширины экрана), но разными способами (я знаю, что именование не делает звук таким образом).

Короткий ответ:

.container является изменчивым/изменчивым, а

.container-fluid является непрерывным/мелким изменением размера по ширине: 100%.

С точки зрения функциональности:

.container-fluid постоянно изменяется при изменении ширины вашего окна/браузера на любую сумму, не оставляя лишнего свободного места на сторонах, в отличие от того, как это делает .container. (Отсюда именование: "жидкость" в противоположность "цифровым", "дискретным", "разделенным" или "квантованным" ).

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

Семантика: "фиксированная ширина"

Вы можете видеть, как может возникнуть путаница имен. Технически мы можем сказать, что .container - это "фиксированная ширина", но она фиксируется только в том смысле, что она не изменяется при каждой гранулированной ширине. Он фактически не "фиксирован" в том смысле, что он всегда остается на определенной ширине пикселя, так как он действительно может изменять размер.

С фундаментальной точки зрения:

.container-fluid имеет свойство CSS width: 100%;, поэтому он постоянно перенастраивается при каждой градации детализации ширины экрана.

.container-fluid {
  width: 100%;
}

.container имеет нечто вроде "width = 800px" (или em, rem и т.д.), определенное значение ширины пикселя при разных ширинах экрана. Это, конечно же, приводит к тому, что ширина элемента резко скачет к другой ширине, когда ширина экрана пересекает порог ширины экрана. И этот порог регулируется медиа-запросами CSS3, которые позволяют применять разные стили для разных условий, таких как диапазоны ширины экрана.

@media screen and (max-width: 400px){
  .container {
    width: 123px;
  }
}
@media screen and (min-width: 401px) and (max-width: 800px){

  .container {
    width: 456px;
  }
}
@media screen and (min-width: 801px){
  .container {
    width: 789px;
  }
}

Beyond

Вы можете сделать любой элемент фиксированной ширины чувствительным с помощью медиа-запросов, а не только элементов .container, поскольку медиа-запросы точно соответствуют тем, как .container реализуется бутстрапом в фоновом режиме (см. ответ JKillian для кода).

Ответ 4

Используйте .container-fluid, когда вы хотите, чтобы ваша страница изменяла форму с каждой небольшой разницей в своем размере видового экрана.

Используйте .container, когда вы хотите, чтобы ваша страница изменила форму только на 4 вида размеров, которые также известны как "контрольные точки".

Точками останова, соответствующими их размерам, являются:

• Extra Small: (только для мобильных устройств)
• Маленький: 768px (планшеты)
• Средняя: 992px (Ноутбуки)
• Large: 1200px (Ноутбуки/Настольные ПК)

Ответ 5

Обновлено 2019

Основное отличие состоит в том, что container масштабируется быстро, а container-fluid всегда имеет width:100%. Поэтому в корневых определениях CSS они выглядят одинаково, но если вы посмотрите дальше, вы увидите, что .container связан с медиа-запросами.

Bootstrap 4

container имеет 5 ширин...

.container {
  width: 100%;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

Bootstrap 3

container имеет 4 размера. Полная ширина на экранах xs, а затем ее ширина зависит от следующих медиа-запросов.

    @media (min-width: 1200px) {
        .container {
            width: 1170px;
        }
    }
    @media (min-width: 992px) {
        .container {
            width: 970px;
        }
    }
    @media (min-width: 768px) {
        .container {
            width: 750px;
        }
    }

Контейнер против демо-контейнера

Ответ 6

.container имеет максимальное значение пикселя ширины, тогда как .container-fluid имеет максимальную ширину 100%.

.container-fluid непрерывно изменяет размеры при изменении ширины вашего окна/браузера на любую сумму.

.container изменяет размеры в кусках на нескольких определенных ширинах, контролируемых медиа-запросами (технически мы можем сказать, что его "фиксированная ширина" потому что указаны значения пикселей, но если вы остановитесь там, люди могут получить впечатление, что он не может изменить размер - то есть не реагировать.)

Ответ 7

С точки зрения дисплея .container дает вам больше контроля над тем, что видят пользователи, и упрощает просмотр того, что увидят пользователи, поскольку у вас есть только 4 варианта отображения (5 в случае начальной загрузки 5), потому что размеры связаны к размерам сетки. например .col-xs, .col-sm, .col и .col-lg.

Это означает, что когда вы проводите пользовательское тестирование, если вы тестируете на дисплеях с 4 различными размерами, вы видите все варианты на дисплее.

При использовании .container-fluid, так как семе WITDH связанно с видовой шириной дисплей является динамическим, поэтому varations гораздо больше, и могут видеть пользователи с очень большими экранами или необычными ширинами экрана результатов, которые вы не ожидали.

Ответ 8

Вы правы в 3.1.container-fluid и .container - это то же самое и работает как контейнер, но если вы их удаляете, он работает как .container-fluid (полная ширина). Они удалили контейнер-жидкость для "Mobile First Approach", но теперь он вернулся в 3.3.4 (и они будут работать по-другому)

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