Из моего чтения документации кажется, что .container - это "родительская" оболочка для .row и divs, которые содержат .spanX (где x totalals 12). Однако, похоже, в их примере навигации есть .row.
Кроме того, на своем сайте документации .container заверяется несколькими связанными с navbar div.
Может кто-нибудь подробно рассказать о том, как должна работать структура? Я новичок в этом.
Класс .row не требуется внутри .container, но это хорошая идея включить его в любом случае, когда вы начнете с того, что позже захотите несколько строк.
Все, что действительно делает .row, это убедиться, что все его div внутри отображаются в отдельной строке, отделенной от предыдущей и следующей .rows.
Для .container внутри .navbar divs, это отдельная вещь, которая требуется для того, чтобы строка navbar оставалась с остальной частью страницы. Если вы посмотрите дальше в визуализированном HTML, вы увидите, что есть еще один .container, который не находится внутри каких-либо div .navbar, и это тот, который содержит весь основной контент.
<div class="container">
<div class="row">
<!-- These divs are inline and do NOT fill up the full 12 columns -->
<div class="span4">...</div>
<div class="span4">...</div>
</div>
<!-- This is a automatically a new line of divs -->
<div class="row">
<!-- This div will appear below the previous row, even though it
would fit next to the other divs -->
<div class="span4"></div>
</div>
<!-- These will appear in their own row, but may act
unexpectedly in certain situations -->
<div class="span4"></div>
<div class="span4"></div>
</div>
.row определяет строку divs, как следует из названия. Каждый из них указывает на новую строку divs, независимо от того, была ли эта строка заполнена или нет.
Ответ намного проще, чем приведенный. Нет, .container не должен содержать какой-либо конкретный код, и у него нет обременений в том, что содержит его...
То, что .container делает, служит в качестве "обертки", чтобы "содержать" размер всех и всех элементов, заключенных внутри него. И .container может обернуть страницы или компоненты. Итак, если вам нужна страница, похожая на те документы Twitter Bootstrap, с "фиксированной" шириной и равным запасом с обеих сторон, то для обертывания всего содержимого на странице требуется только один .container.
Существуют и другие применения для .container; вы заметили, как верхняя панель навигации в Bootstrap docs (.navbar-fixed-top) охватывает всю ширину экрана, но элементы nav внутри панели навигации "содержатся" в ширине содержимого? Это связано с тем, что .navbar-fixed-top не внутри .container, а .nav внутри него.
Сетка бутстрапа состоит из 12 столбцов, которые могут быть скорректированы в любой комбинации в строке до тех пор, пока они составляют до 12. Вы можете считать их строками сдерживания, такими как строки таблицы, которые предназначены для отдельные разные строки содержимого. Внутри сетки контейнер .row имеет отдельную задачу и есть (и требуется) для корректировки последней ширины желоба столбцов сетки, которая зависит от размера экрана (если включен отзывчивый лист). Если вы посмотрите на css за классом .row, вы заметите, что по умолчанию оно имеет свойство margin-left:-30px (в противном случае оно может быть больше или меньше в зависимости от размера экрана), свойство, которое предназначено для "удаления", желоба из последнего столбца в строке; без него сетка не будет перенастраивать желобок, и он будет разбиваться на вторую линию.
Теперь причина, по которой контейнер .row является дочерним элементом контейнера .container, заключается в том, что контейнер .row предназначен только для разделения "строк" содержимого, а не для размещения разделов и более над центральным содержимым в страница. Таким образом, причина, по которой пример навигации не был такой, вероятно, объясняется тем, что элементы навигации не имеют ширины желоба, поскольку он должен был быть полным блочным элементом, а не сеткой, поэтому не было необходимости reset, который остался свободным желобом.