Как удалить все поля из класса boostrap container-fluid и его строк?
.container-fluid { padding: 0;} does basically what I want but it adds 20px overflow to body..
Так что я должен просто,
body, html { overflow-x: hidden; }
Сделайте что-нибудь с .container-fluid > .row
Чтобы уточнить свой вопрос:
.row имеет отрицательное левое и правое поле, равное значению слева и справа от col-*-*, поэтому есть горизонтальные полосы прокрутки, когда вы играете с сеткой, не понимая, как она работает. Если вы манипулируете классами столбцов нулевым заполнением слева и справа или каким-либо другим значением, отрицательное поле в .row должно быть равно прописке слева и справа от классов столбцов. Контейнер также имеет отступы, которые соответствуют значению классов столбцов для предотвращения полос прокрутки.
Итак, ответ: .container-fluid > .row - введите маркер: 0 слева и справа, если вы удалите прописку слева и справа от классов столбцов. Если все равно нулю, тогда вы можете просто отрегулировать жидкость .container или .container с нулевым заполнением слева и справа, но если вы используете разные значения > 15px L и R, тогда это другая история, так как .container/.container-fluid потребуется для корректировки, если левое и правое заполнение на столбцах больше 15 пикселей.
На вкладке col-*-* нет отступов, что совсем не так, если вы используете размер поля: border-box глобально, как делает Boostrap 3.
Если вам нужна жесткая сетка, удалите все дополнения на влево и вправо всех классов столбцов, а затем удалите > и справа .row, а затем вы можете удалить левое и правое дополнение на .container.
DEMO: http://jsbin.com/jeqase/2/
Удаляет все отступы и отрицательные поля для жесткой сетки и полной ширины контейнера с любым окружающим элементом (body, html, whatever) с классом .alt-grid:
.alt-grid [class*="col-"] {padding-left:0;padding-right:0}
.alt-grid .row {margin-left:0;margin-right:0}
/* container adjusted */
.alt-grid .container {width:100%;max-width:none;padding:0;}
Вы также можете сделать это с помощью .container-fluid - единственное, что нужно обнулить - это левое и правое заполнение.
Если вы хотите удалить маржу, то не лучше всего использовать класс Bootstrap или div (контейнер-жидкость, html, body). Я думаю, что лучше создать отдельный класс и добавить его в элементы. Если вы хотите удалить все поля:
.remove-all-margin{
margin:0 ! important;
}
Если вы хотите удалить все поля и прокладки:
.remove-all-margin-padding{
margin:0 ! important;
padding:0 ! important;
}
это всегда лучший способ добавить пользовательский класс к элементам, которые вы хотите избавиться от полей, а не переопределять все элементы начальной загрузки.
row.no-margin{
margin:0 ! important;
}