Кілька та / або вкладені контейнери Bootstrap?

84

Я розумію , що всі елементи стилю Bootstrap повинні існувати всередині <div class="container">елемента. Але іноді я бачу приклади Bootstrap, де є кілька "контейнерів":

<div class="container">
    <!-- Blah, GUI stuff, blah -->
</div>

...

<div class="container">
    <!-- Blah, more GUI stuff, blah -->
</div>

Мої запитання:

  1. Коли вам коли-небудь знадобиться одна HTML-сторінка з кількома "контейнерами div"? Яку користь дає ця пропозиція на відміну від простого розміщення всього тіла всередині одного великого "контейнерного div"?
  2. Чи хотіли б ви коли-небудь вкласти "контейнерні divs" всередину інших? Коли / чому?
css  twitter-bootstrap 
— smeeb
джерело
1
Якщо ви використовуєте карусель повної ширини, вона містить контейнери, які використовуються для підписів, тому вона не повинна бути в контейнері. Через це у вас міг бути контейнер над ним і контейнер під ним.
— Aibrean
1
Хоча @Christina правильна тим, що в документах сказано, що ви не вкладаєте контейнери, іноді це корисно і корисно. Дивіться stackoverflow.com/questions/29660034 / ... для отримання додаткової інформації про вкладеності.
— gidmanma

Відповіді:

80

  1. Деякі розділи сторінки будуть охоплювати всю ширину області перегляду, а інші ні. Деякі фони будуть на всю ширину, але вміст - ні.

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

  2. Ти не гніздишся .container або .container-fluid- см документацію . Це не потрібно.

    Документи: Bootstrap вимагає містять елемент для обгортання вмісту сайту та розміщення нашої системи сіток. Ви можете вибрати один із двох контейнерів для використання у своїх проектах. Зверніть увагу, що через заповнення та багато іншого, жоден контейнер не може бути зниклим (це також не означає, що .container та .container-fluid НЕ повинні бути вкладеними).

— Крістіна
джерело
4
У мене часто є .container-fluidщось на зразок навігаційної панелі чи банера, поки головний сайт знаходиться всередині .container.
— DavidG
3
@DavidG Так, і тоді у вас є подвійне заповнення. Документи: Bootstrap вимагає містять елемент для обгортання вмісту сайту та розміщення нашої сіткової системи. Ви можете вибрати один із двох контейнерів для використання у своїх проектах. Зверніть увагу, що через заповнення та інше жоден контейнер не може зникнути. getbootstrap.com/css
— Крістіна
1
@DavidG. Я не використовую .container-fluid, якщо безпосередня дитина не є .row і стовпцями.
— Крістіна
1
Я теж не мав. Я мав на увазі, що у мене буде контейнер для рідини з панеллю навігації, щоб він стікав з країв екрана, а потім, після закриття тегу контейнера, розпочати новий нежидкий контейнер з основним вмістом.
— DavidG
1
Тут слід зробити велику відмінність - можливо, їх не слід вкладати безпосередньо , але їх можна вкладати, а в деяких випадках потрібно вкладати . Скажімо, у мене є основний контейнер div з основним контейнером, який не є рядком або стовпцем - у такому випадку мені потрібен .container-fluidклас, що оточує мої рядки / стовпці всередині панелі; інакше я отримав би горизонтальну смугу прокрутки (якщо переповнення всередині панелі не встановлено як приховане - але я, можливо, цього не хочу, можливо, я хочу смужку прокрутки, якщо всередині багато даних, можливо, широка таблиця).
— jbyrd,
17

На відміну від того, що сказали деякі, ви можете вкласти a container-fluidвсередину acontainer . Є навіть приклад на офіційному веб-сайті bootstrap:

http://getbootstrap.com/examples/navbar/

— Поступово
джерело
1
Якщо вміст цього посилання врешті-решт зміниться, це версія 3.3, де приклад включає containerвкладання a container-fluid: view-source: getbootstrap.com/docs/3.3/examples/navbar
— Райан
5

Насправді це повністю залежить від вимог дизайнера.

Інколи вам потрібна повна ширина рядка (я маю на увазі сказати область перегляду або смугу видимої частини, яку ви можете досягти без окремого класу контейнера)

http://binarytheme.com/demos?theme=bootsrap-landing-page-blue

див. вище приклад шаблону, щоб зрозуміти

— тест
джерело
0

Заощадьте свій час і перейдіть на Css-grid рідну CSS-сітку.

Контейнери Bootstrap мають обмеження, якщо ви шукаєте обмеження на 12 стовпців, 10-піксельне завдання заповнення, додавши до цього не рідне (вбудований CSS), де користувачеві потрібно завантажити його на свою машину, і крім усього, що число занурення, яке вам потрібно обробити.

Маючи все це на увазі, спробуйте і перейдіть на CSS-сітку, ось хороший ігровий майданчик для початку.

Тепер до мінусів CSS-сітки приходить те, що все ще не сумісне з IE.

— Ферас
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.