Класс строки Bootstrap содержит margin-left и margin-right, что создает проблемы

Я использую класс Bootstrap 'row' для выравнивания divs один поверх другого, который отлично работает, но

.row {
   margin-left: -15px;
   margin-right: -15px;
 }

Я заметил, что он указывает атрибуты margin-left и margin-right как -13px, из-за которых мое содержимое смещается влево. поэтому я добавил следующий класс:

.row-no-margin {
   margin-left: 0px;
   margin-right: 0px;
}

Это решает цель, но мне все равно хотелось бы знать, есть ли какая-то конкретная причина для 'margin-left: -15px; '. И каков наилучший подход для решения моей проблемы.

Ответы

Ответ 1

.row предназначен для использования внутри container. Поскольку container имеет дополнение для настройки отрицательного поля в .row, столбцы сетки, используемые внутри .row, могут затем регулироваться до полной ширины контейнера. См. Документы Bootstrap: http://getbootstrap.com/css/#grid

Вот пример, иллюстрирующий: http://bootply.com/131054

Итак, лучшее решение для вас может разместить ваш .row внутри .container или .container-fluid

Ответ 2

Вы можете использовать строку-жидкость вместо строки, тогда у вас не будет этой проблемы. (для предыдущих версий бутстрапа)

Я не уверен в последних версиях 3, любым способом:

Проблема в том, что первый столбец не должен иметь половину желоба слева, а последний не должен иметь половину желоба справа. Вместо того, чтобы использовать какой-то класс .first или .last в этих столбцах, как это делают некоторые grid-системы, вместо этого они устанавливают класс .row для отрицательных полей, которые соответствуют заполнению столбцов. Это "тянет" сточные канавы от первого и последнего столбцов, в то же время делая его более широким.

Для получения дополнительной информации об этом Почему у загрузочного файла .row есть по умолчанию крайний левый -30px?

Ответ 3

Используете ли вы Bootstrap 3? Моя версия css имеет -15px, а не -13px. В любом случае, я просто сделал то, что у вас есть, и перезаписал стиль. Я верю в это, потому что класс .container имеет отступы 15px слева и справа, и этот отрицательный запас в строках вытаскивает это содержимое обратно к краю контейнера.

Ответ 4

Я использовал   div class= "форма-контроль" вместо   div class= "строка"

Это исправлено для меня.