Различия между контейнером, строкой и интервалом в Bootstrap
При использовании Twitter Bootstrap, должен ли я вставить div div в контейнер div и поместить все мои div div внутри вложенной строки? Это лучшая практика?
Что делать, если я устанавливаю div div непосредственно в мой div div и не добавляю строку div в контейнер div?
Что делать, если я поместил div div прямо в мой контейнер div, не используя div div вообще?
Все, что я знаю, это контейнер 940px, а строка - 960px. Тем не менее, я видел примеры, когда div строки был помещен в контейнер div. Будет ли это помогать или это сделает дисплей грязным?
Пожалуйста, объясните мне, какие методы следует соблюдать и при каких обстоятельствах.
Ответы
Ответ 1
В общем, вы бы использовали контейнеp > строкa > span
Я не могу придумать пример, где другие 2 варианта, о которых вы спрашиваете, могут сломать что-либо, но они могут не дать вам желаемых результатов.
Обертка всего в div conatiner будет управлять шириной страницы и дополнением стороны. Использование строки div гарантирует, что ваши пролеты будут отложены так, как вы хотите. Например, представьте себе 2 строки, каждая из которых имеет только один span4. Если вы не используете div строки, 2 span4s будут плавать один рядом друг с другом, а не вертикально.
Есть много случаев, когда у вас будут вложенные контейнеры в макете Bootstrap, первый из которых вы, скорее всего, встретитесь, находится в панели навигации, и как только вы начнете использовать жидкие макеты Bootstrap, вы увидите, что контейнерные divs не всегда равны 940px, но если вы придерживаетесь схемы контейнеp > строкa > диапазон, это сэкономит вам некоторое горе, особенно если вы только начинаете.
Удачи!
Ответ 2
У вас должен быть row
внутри container
, так как использование container
гарантирует, что контейнер равномерно центрирован по всей странице с четными полями, поскольку container
имеет margin-left:auto;margin-right:auto;
в CSS.
Используйте row
, если вы хотите, чтобы spanX
отображался в той же строке.
spanX
, которые не находятся внутри row
, будут завершены.
Вот демонстрация, которая покажет вам различия
Ответ 3
A row
предназначен для входа внутрь container
.
A span
предназначен для входа внутрь row
.
Рендеринг может стать непредсказуемым, если вы идете с любой другой комбинацией, кроме container > row > span.
В конечном счете, если ваш код работает, значит, вы все в порядке. Нет причин зацикливаться на том, что сделали другие люди. НО, если вы измените его, убедитесь, что это по уважительной причине, и что вы прокомментируете код повсюду, чтобы объяснить свой мыслительный процесс.