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

Только что скачал 3.1 и нашел в документах ...

Превратите любой макет сетки фиксированной ширины в макет полной ширины, изменив крайний вид .containerна .container-fluid.

Заглянув внутрь bootstrap.css, кажется, что .container-fluidидентично .container. Оба имеют одинаковый CSS, и каждый экземпляр .container-fluidимеет пару .container, и все классы столбцов указываются в процентах.

Изучая примеры, я не видел никакой разницы, потому что все казалось изменчивым.

Поскольку я новичок в Bootstrap, я предполагаю, что что-то упустил. Может ли кто-нибудь занять минуту и ​​просветить меня?

Быстрая версия: .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 пикселей. Поскольку он больше минимальной ширины 992 пикселя, ваш .containerэлемент будет иметь ширину 970 пикселей. Затем вы медленно расширяете окно браузера. Ширина вашего .containerне изменится, пока вы не достигнете 1200px, при этом он будет прыгать до 1170px в ширину и останется таким же для любой большей ширины браузера.

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

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

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

Пример первый

container-fluid:

http://www.bootply.com/119981

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

Теперь давайте посмотрим на остальные просто нормально containerи посмотрим на края предпросмотра

Пример два

container

http://www.bootply.com/119982

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

РЕДАКТИРОВАТЬ

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

http://www.bootply.com/119983

Я надеюсь, что это помогло прояснить немного!

Оба .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;
  }
}

за

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

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

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

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

• Очень маленький: (только мобильное разрешение)
• Маленький: 768 пикселей (планшеты)
• Средний: 992px (ноутбуки)
• Large: 1200px (ноутбуки / десктопы)

Обновлено 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;
        }
    }

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

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

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

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

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

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

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

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

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