Контейнер-рідина проти .контейнер

Щойно завантажили 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клас надає своєму діві певну фіксовану ширину. Ці рядки не існують у жодній формі для container-fluid, тому його ширина змінюється щоразу, коли змінюється ширина вікна перегляду.

Наприклад, скажімо, вікно вашого браузера шириною 1000 пікселів. Оскільки вона більша, ніж мінімальна ширина 992 пікселів, ваш .containerелемент матиме ширину 970 пікселів. Потім ви повільно розширюєте вікно веб-переглядача. Ширина вашої .containerзміни не зміниться, поки ви не досягнете 1200 пікселів, при цьому вона підскочить до ширини 1170 пікселів і залишиться таким чином для будь-якої більшої ширини браузера.

.container-fluidЗ іншого боку, ваш елемент буде постійно змінювати розмір, коли ви вносите навіть найменші зміни в ширину браузера.

Я думаю, ти кажеш, що containerпроти container-fluid- це різниця між чуйною та невідповідною сіткою. Це неправда ... що говорить, що ширина не фіксована ... її повна ширина!

Це важко пояснити, тому давайте розглянемо приклади

Приклад перший

container-fluid:

http://www.bootply.com/119981

Отже, ви бачите, як контейнер займає весь екран ... ось це container-fluid.

Тепер давайте подивимось на іншого лише звичайне containerі переглянемо краї попереднього перегляду

Приклад другий

container

http://www.bootply.com/119982

Тепер ви бачите на прикладі білий простір? Це тому, що його фіксована ширина container! Можливо, буде більше сенсу відкривати обидва приклади на двох різних вкладках і перемикатися вперед і назад.

EDIT

Ще краще ось приклад з обома контейнерами одночасно! Тепер ви дійсно можете сказати різницю!

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 типи розмірів , які також відомі як "точки прориву".

Точками переривання, що відповідають їх розмірам, є:

• Дуже малий: (лише мобільна роздільна здатність)
• Малий: 768px (Таблетки)
• Середній: 992 пікселів (ноутбуки)
• Великий: 1200 пікселів (Ноутбуки / Настільні ПК)

Оновлено 2019 рік

Основна відмінність полягає в тому, що containerваги реагують, хоча container-fluidє завжди width:100%. Тому у кореневих визначеннях CSS вони відображаються однаковими, але якщо ви подивитесь далі, то побачите, що .containerпов'язане з медіа-запитами.

Завантаження 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;
  }
}

Завантаження 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-fluid і .container однакові і працюють як контейнер, але якщо ви вилучите їх, він працює як .container-fluid (повна ширина). Вони видалили .container-fluid для "Мобільного першого підходу", але тепер він повернувся в 3.3.4 (і вони працюватимуть інакше)

Щоб отримати останню завантажувальну програму, будь ласка, прочитайте цю публікацію в stackoverflow, це допоможе перевірити її .