Новая система сетки Bootstrap 3 великолепна. Он более мощный для гибкого дизайна на всех размерах экрана и намного проще для вложенных.
Но у меня есть одна проблема, которую я не мог понять. Как добавить точный разрыв между столбцами? Скажем, у меня есть контейнер 960px, 3 столбца на 310px и 2 желоба в 15px между 3 столбцами. Как это сделать?
Вы можете создать класс CSS для этого и применить его к своим столбцам. Так как желоб (расстояние между столбцами) управляется заполнением в Bootstrap 3, отрегулируйте заполнение соответствующим образом:
.col {
padding-right:7px;
padding-left:7px;
}
Демо: http://bootply.com/93473
РЕДАКТИРОВАТЬ Если вы хотите только интервал между столбцами, вы можете выбрать все столбцы, кроме первого и последнего, как это..
.col:not(:first-child,:last-child) {
padding-right:7px;
padding-left:7px;
}
Для Bootstrap 4 см. Удаление пространства желоба только для определенного div
Чтобы определить сетку с тремя столбцами, вы можете использовать customizer или загрузить исходный код, чтобы установить меньше переменных и перекомпилировать.
Чтобы узнать больше о сетке и ширине столбцов/водостоков, пожалуйста, также читайте:
В случае с контейнером 960px рассмотрим среднюю сетку (см. также: http://getbootstrap.com/css/#grid). Эта сетка будет иметь максимальную ширину контейнера 970px.
При установке @grid-columns:3; и установке @grid-gutter-width:15px; в переменных. Вы получите:
15px | 1st column (298.33) | 15px | 2nd column (298.33) |15px | 3th column (298.33) | 15px
(Отправлено от имени OP).
Я считаю, что понял.
В моем случае я добавил [class*="col-"] {padding: 0 7.5px;};.
Затем добавлен .row {margin: 0 -7.5px;}.
Это работает очень хорошо, за исключением 1px margin с обеих сторон. Поэтому я просто делаю .row {margin: 0 -7.5px;} до .row {margin: 0 -8.5px;}, тогда он отлично работает.
Я понятия не имею, почему существует 1px margin. Может кто-нибудь может это объяснить?
См. образец, который я создал: