it-swarm.com.ru

Класс строки начальной загрузки содержит 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; '. И каков наилучший подход к решению моей проблемы.

35
Tarun Gupta

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

Вот пример, чтобы проиллюстрировать: http://bootply.com/131054

Таким образом, лучшим решением может быть размещение вашего .row внутри .container или .container-fluid

69
Zim

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

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

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

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

6
4dgaurav

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

2
JesseEarley

Старая тема, но я недавно был затронут этим. 

Использование класса «row-Fluid» вместо «Row» работало хорошо для меня, но я не уверен, полностью ли это поддерживается в будущем. 

Итак, после прочтения Почему у начальной загрузки .row по умолчанию оставлено поле слева -30px Я просто использовал <div> (без какого-либо класса строки), и он вел себя точно так же, как <div class="row-fluid">

0
ShhTot

Я столкнулся с той же самой проблемой, и первоначально я удалил правое и левое поле строки, и это удалило горизонтальную прокрутку, но это не было хорошо. Затем, после 45 минут осмотра и поиска, я обнаружил, что я использую контейнерную жидкость и удаляю прокладку, а ее внутренний ряд имеет отрицательные поля слева и справа. Так что я дал контейнер-флюид, он отступил, и все вернулось на круги своя.

Если вам нужно удалить заполнение контейнера жидкостью, не просто удаляйте левую и правую отрицательные поля каждой строки в своем проекте, вместо этого введите класс и используйте его в желаемом контейнере

0
Junaid