Допускается ли совместное использование классов container-fluid
и container
?
Можно ли их вкладывать друг в друга?
Bootstrap 3.5
Можно. Но зачем?
container
- это базовый блок с фиксированной шириной контента с внутренними отступами по бокам для внутренних колонок.
container-fluid
- это базовый блок со 100% шириной контента с внутренними отступами по бокам для внутренних колонок.
Они одинаковые по свойствам только первому ширина задана, а второму нет. Он тянется во всю ширину по умолчанию, т.к. он блочный.
1 - Если одному диву вы зададите оба этих класса, то он станет дивом с фиксированной шириной. То есть добавится св-во от первого класса и смысла добавлять второй просто нет. То есть container-fluid
превратится в container
.
2 - если вовнутрь container-fluid
поставить container
- то все будет хорошо, до тех пор пока вы смотрите страницу на широком экране. При уменьшении страницы в размерах близких к breakpoints отступы одного контейнера будут внахлест на другой, контент съедет вправо, и не будет помещаться в экран.
3 - наоборот сделать можно почти без последствий, появится только дополнительный отступ справа и слева. Получается в блоке с фиксированной шириной находится блок с шириной занимающей все его пространство - нет проблем.
4 - ну и container-fluid
во внутрь container-fluid
аналогично без проблем - только появление дополнительных отступов.
Вот пример для наглядности(Смотрите на широком экране и уменьшайте окно браузера по ширине - смотрите за поведением)
i{
display: block;
padding: 10px;
background: #eee;
}
.b-c{
color: rgba(0, 0, 255, 0.5);
}
.b-c-f{
color: rgba(255, 0, 0, 0.5);
}
.container{
background: rgba(0, 0, 255, 0.5);
}
.container-fluid{
background: rgba(255, 0, 0, 0.5);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<i><b class="b-c">container</b></i>
</div>
<br>
<div class="container-fluid">
<i><b class="b-c-f">container-fluid</b></i>
</div>
<br>
<div class="container">
<div class="container">
<i><b class="b-c">container</b> > <b class="b-c">container</b></i>
</div>
</div>
<br>
<div class="container">
<div class="container-fluid">
<i><b class="b-c">container</b> > <b class="b-c-f">container-fluid</b></i>
</div>
</div>
<br>
<div class="container-fluid">
<div class="container-fluid">
<i><b class="b-c-f">container-fluid</b> > <b class="b-c-f">container-fluid</b></i>
</div>
</div>
<br>
<div class="container-fluid">
<div class="container">
<i><b class="b-c-f">container-fluid</b> > <b class="b-c">container</b></i>
</div>
</div>
<br>
Бутстрап предоставляет свою систему строения контента
.container(-fluid)>.row>.col(-lg-, -md-,...)
И если вы пользуетесь бутсрапом, то пользуйтесь его сеткой. Для внутреннего разделения на горизонтальные блоки пользуйтесь row
, вместо container
.
Не нужно делать лишнего из блоков, которые для этого не предназначены.
Изменив логику стандартного фреймворка вы усложняете в будущем обновление, отладку, и работу с таким проектом.
Если у вас стоит какая-то сверх-задача пользуйтесь другим фреймворком, либо собственной версткой. Бутстрап - не панацея, далеко не идеален и не подходит для абсолютно всех задач.