dir.by  
  Поиск  
Компьютер, программы
Bootstrap - кнопки, меню, диалог, slider ... Контейнеры для размещения элементов
 Контейнеры в Bootstrap ("container-fluid" и "container") 
посмотрели 7979 раз
обновлено: 9 января 2019
container-fluid для такого элемента ширина не ограничена и это 100% экрана.
Другими словами это блочный элемент и он тянется до всей ширины экрана.
container-fluid не содержит отступы слева и справа.

container для такого элемента максимальная ширина ограничена 1200px
container содержит отступы слева и справа.
Если экран меньше 1200px тогда container займет всю ширину экрана минус отступы слева и справа.
Пример
  Html  
<html>

     <!-- заголовок -->
     <head>
          <meta charset="utf-8">
          <title>Example</title>
     </head>

     <!-- страница -->
     <body>

          <!-- подключить библиотеку Bootstrap (js файл) -->
          <script src="https://dir.by/example_lib/bootstrap-4.1.3/js/bootstrap.min.js"></script>
    
          <!-- подключить библиотеку Bootstrap (css файл) -->
          <link rel="stylesheet" href="https://dir.by/example_lib/bootstrap-4.1.3/css/bootstrap.min.css">
    
          <!-- HTML элементы -->
          <div class="container" style='background-color:gold;'>
               container
          </div>

          <br>

          <div class="container-fluid" style='background-color:lightblue;'>
               container-fluid
          </div>

     </body>

</html>
Пример смотрим, тестируем
На заметку!
container-fluid не вкладывается внутрь container
  Html     это не правильно
<div class="container">
     <div class="container-fluid">
     </div>
</div>
 
container не вкладывается внутрь container-fluid
  Html     это не правильно
<div class="container-fluid">
     <div class="container">
     </div>
</div>
Где используется "container"
container используется для row ...
Где используется "container-fluid"
container-fluid используется для row ...
а также используется для navbar ...
 
← Предыдущая тема
Bootstrap где скачать и как подключить?
 
Следующая тема →
Bootstrap 4 отличие от Bootstrap 3
 
Ваши Отзывы ... комментарии ...
   
Вашe имя
Ваш комментарий (www ссылки может добавлять только залогиненный пользователь)

Экскурсии по Москве Экскурсии по Москве: пешеходные, автобусные и речные прогулки на любой вкус
  Объявления  
  Объявления  
 
Что такое Bootstrap?
Bootstrap где скачать и как подключить?
Контейнеры в Bootstrap ("container-fluid" и "container")
Bootstrap версия 4.0
Bootstrap 4 отличие от Bootstrap 3
элементы
"Navbar" в Bootstrap 4.0 - это главное горизонтальное меню для сайта (навигационные заголовки)
стили
class="form-inline" элементы на одной строке | Bootstrap 4.0
class="navbar-expand-lg" исчезает если размер области меньше lg | Bootstrap 4.0
class="mr-auto" отодвинуть в правый край , class="ml-auto" отодвинуть в левый край | Bootstrap 4.0
Отступы по вертикали, горизонтали | Bootstrap 4.0
для изучения
WEB Сайты для изучения Bootstrap 4.0
Bootstrap элементы для версии 3 и 4
Создание сетки "col-md-число" в Bootstrap 3 и Bootstrap 4
WWW сайты для изучения Bootstrap
Сайты для изучения Bootstrap

  Ваши вопросы присылайте по почте: info@dir.by  
Яндекс.Метрика