Пожалуйста, объясните мне, когда следует использовать классы container и row. Я не уверен, потому что документация Bootstrap довольно неясна в этой части.
Я использую Bootstrap 3.
Когда следует использовать контейнер и строку в Twitter Bootstrap 3?
Ответ 1
container - это контейнер элементов row.
row Элементы - это контейнеры столбцов (документы называют его сеткой)
Кроме того, container устанавливает поля содержимого, относящиеся к отзывчивому поведению вашего макета.
Таким образом, класс container часто используется для создания содержимого "в штучной упаковке" на основе правил стиля проекта Bootstrap.
Если вы хотите пойти "из коробки", создавая сетку полной ширины, вы можете использовать только элементы row со столбцами внутри (охватывая обычное общее количество 12cols).
Классы container и row предназначены для элементов внутри тела.
Таким образом, базовый макет будет выглядеть следующим образом:
<html>
<body>
<div class="container">
<div class="row">
<div class="col-md-xx"></div>
...
</div>
<div class="row">
<div class="col-md-xx"></div>
...
</div>
</div>
</body>
</html>
Для макета с коротким откликом.
Если вы опустите container, вы получите полноразмерный макет.
Пример Jumbotron
Jumbotron - хороший пример поведения container. Если вы помещаете элемент Jumbotron в элемент container, он имеет закругленные границы и фиксированную ширину на основе чувствительной ширины.
Если Jumbotron находится за пределами контейнера, он охватывает всю ширину без границ.
Ответ 2
Мне было интересно о том же и понять, что я прошел через bootstrap.css версии 3. Ответ лежит в строке №. От 1585 до 1605. Я отправлю эти строки здесь для лучшего понимания, как показано ниже.
.container
{
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
Весь код является самоочевидным. Однако, чтобы уточнить, контейнер будет принимать 750px, если ширина экрана находится между 768px и 992px и так далее, как показывает код. Теперь, для общего разрешения экрана более 1200, контейнер будет принимать 1170px, но вычитая отступы 30 px (15px+15px), действующее свободное пространство будет 1140px, которое центрируется на экране в качестве поля слева и справа установлено на авто.
Теперь, в случае class="row", существует код ниже:
.row {
margin-right: -15px;
margin-left: -15px;
}
Итак, если строка находится внутри контейнера, она эффективно захватывает отступы по 15 пикселей каждую сторону от контейнера и использует полное пространство. Но если строка класса находится внутри тега body, она будет стремиться перемещаться из видимой области как в левую, так и в правую сторону браузера из-за отрицательных полей.
Надеюсь, это было ясно.
Ответ 3
Container
В контейнере предусмотрены ограничения ширины на чувствительной ширине. Когда изменяются изменчивые размеры, меняется его контейнер. Строки и столбцы основаны на процентах, поэтому их не нужно менять. Обратите внимание, что на каждой стороне есть край 15px, отмененный строками.
Ряды
Строки всегда должны быть в контейнере.
Строка предоставляет столбцам место для жизни, в идеале имеющее столбцы, которые добавляют до 12. Он также действует как обертка, так как все столбцы плавают влево, дополнительные строки не имеют перекрытий, когда поплавки становятся странными.
Строки также имеют отрицательный запас 15px с каждой стороны. Дива, который составляет строку, обычно ограничивается внутри заполнения контейнеров, касаясь краев розовой области, но не за ее пределами. 15px отрицательные поля выталкивают строку поверх верхней части контейнера 15px, что фактически отрицает ее. Кроме того, строки гарантируют вам, что все из них внутри отображаются в отдельной строке, отделенной от предыдущей и следующих строк.
Столбцы
У столбцов теперь есть 15px padding. Это дополнение означает, что столбцы на самом деле касаются края строки, которая сама касается края контейнера, так как строка имеет отрицательный запас, а контейнер имеет положительное дополнение. Но заполнение столбца подталкивает что-либо внутри столбца туда, где оно должно быть, а также обеспечивает 30px желоба между столбцами. Никогда не используйте столбец за пределами строки, он не будет работать.
Для получения дополнительной информации я предлагаю вам прочитать эту статью. Это действительно ясно и объясняет, как работает система сетки Bootstrap.
Ответ 4
"контейнер контейнера" обертывает содержимое в пределах порта центра представления. Весь контент с тегом body может быть помещен в результаты страницы, отображаемой указанной ширины в центре страницы.
Класс 'row' используется, когда вам нужно размещать содержимое в столбцах по строке, вы можете иметь до 12 столбцов в общей сложности в каждой строке.
Ответ 5
В традиционных методах CSS вы, вероятно, будете использовать следующие классы:
wrapper, header, navigator, contents, footer
использование вышеуказанных классов может выглядеть следующим образом:
<body>
<div class="wrapper">
<div class="header">
</div>
<div class="navigator">
</div>
<div class="content">
</div>
<div class="footer">
</div>
</div>
</body>
В бутстрапе вы можете использовать, если хотите, или если вы используете этот шаблон, классы начальной загрузки, подобные этому примеру:
<body>
<div class="container">
<div class="col-md-12">
<h1>Header</h1>
<p>Header contents goes here</p>
</div>
<div class="col-md-12">
<nav role="navigation" class="nav navbar">
<h1>Navigation</h1>
<p>Navigation contents goes here</p>
</nav>
</div>
<div class="col-md-12">
<div class="pagination">
<h1>Page contents</h1>
<p>Webpage contents goes here</p>
</div>
</div>
<div class="col-lg-12">
<h1>Footer contents</h1>
<p>footer contents goes here</p>
</div>
</div>
</body>
Для класса строк вы можете использовать класс строк, если хотите создать табличный макет для страницы, но когда вы хотите отображать данные в формате таблицы, вы должны использовать класс таблицы, но таблица не будет реагировать.
Чтобы создать табличный макет, отличный от таблиц данных, используйте класс строк, как в этом примере:
<body>
<div class="container">
<div class="row">
<div class="col-sm-4" >.col-sm-4</div>
<div class="col-sm-4" >.col-sm-4</div>
<div class="col-sm-4" >.col-sm-4</div>
</div>
</div>
</body>
Вы должны попытаться избежать использования табличного макета и попытаться использовать гибкие таблицы, как описано здесь
Ответ 6
Вам нужно использовать .container, когда вам нужно создать фиксированный блок, макет.
.row, мы используем внутри него, чтобы иметь гибкий контент внутри нашего контейнера.
.container класс имеет значения по умолчанию для экранов: small - 750px, medium - 970px, large - 1170px.