Различия между контейнером, строкой и интервалом в 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.

В конечном счете, если ваш код работает, значит, вы все в порядке. Нет причин зацикливаться на том, что сделали другие люди. НО, если вы измените его, убедитесь, что это по уважительной причине, и что вы прокомментируете код повсюду, чтобы объяснить свой мыслительный процесс.