Новая система сетки Bootstrap 3 великолепна. Он более мощный для гибкого дизайна на всех размерах экрана и намного проще для вложенных.Как отрегулировать водосточный желоб в системе сетки Bootstrap 3?
Но у меня есть одна проблема, которую я не мог понять. Как добавить точный разрыв между столбцами? Скажем, у меня есть контейнер 960px, 3 столбца на 310px и 2 желоба в 15px между 3 столбцами. Как мне это сделать?
Для этого вы можете создать класс CSS и применить его к своим столбцам. Поскольку водосток (расстояние между колоннами) управляется посредством заполнения в Bootstrap 3, отрегулировать отступы соответственно:
.col {
padding-right:7px;
padding-left:7px;
}
Демо: http://bootply.com/93473
EDIT Если вы хотите только расстояние между колоннами можно выбрать все COLS, кроме первого и последнего, как это ..
.col:not(:first-child,:last-child) {
padding-right:7px;
padding-left:7px;
}
Благодарим за быстрый ответ. –
Но таким образом он добавит дополнение к первому ребенку. Это не совсем то, что я хочу. Я думаю, что я могу добавить make container 975px и добавить padding-right: 15px; до .col. При изменении размера экрана мне нужно удалить это дополнение: 15px ;. Кроме того, если у меня есть другие элементы на странице. Мне нужно добавить это дополнение: 15px; и удалите его при изменении размера экрана. Я не уверен, что это лучший способ обработать столбцы с желобом в Bootstrap 3. –
Не думаю, что вам нужно указать первый ребенок или последний ребенок, так как все элементы столбца в бутстрапе 3 придерживаются того же поля или отступов слева и справа. –
Чтобы определить сетку из 3 столбцов, вы можете использовать customizer или загрузить исходный код, чтобы установить меньше переменных и перекомпилировать.
Чтобы узнать больше о сетке и столбцы/водосточных ширины, пожалуйста, прочтите:
В вас случае с контейнер 960px рассматривает среднюю сетку (см. так: http://getbootstrap.com/css/#grid). Эта сетка будет иметь максимальную ширину контейнера 970px. При установке @grid-columns:3; и установка @grid-gutter-width:15px; в variables.less вы получите:
15px | 1st column (298.33) | 15px | 2nd column (298.33) |15px | 3th column (298.33) | 15px
+1 Загрузка файла LESS в отношении Bootstrap 3.3.6 - это, пожалуй, самый эффективный способ сделать это. Кто действительно хочет войти в файл .CSS и вручную изменить x число селекторов Bootstraps ??? и только для того, чтобы сделать это снова, когда нужен другой проект Bootstrap? Позвольте МЕНЬШЕ выполнить весь тяжелый подъем. – blackhawk
(Опубликовано от имени О.П.).
Я верю, что понял.
В моем случае я добавил [class*="col-"] {padding: 0 7.5px;};.
Затем добавлено .row {margin: 0 -7.5px;}.
Это работает очень хорошо, за исключением того, что с обеих сторон имеется 1px-маржа. Поэтому я просто делаю .row {margin: 0 -7.5px;} до .row {margin: 0 -8.5px;}, тогда он отлично работает.
Я понятия не имею, почему существует 1px margin. Может, кто-нибудь может это объяснить?
Смотрите пример, который я создал:
Когда вы вставляете строки или у вас есть строки с одним или двумя столбцами, вы должны быть более конкретными: 'div [class^=" col - "]: not (: first-child) { padding -Выберите: 7px; } div [класс^= "col -"]: not (: last-child) { padding-right: 7px; } ' – Esger
Это кажется хорошим.Первый результат мне нравится. Большинство просто не отображает отступы, которые заставляют текст стоять против края. Я пытаюсь воспроизвести ваш ответ, используя jsfiddle. http://jsfiddle.net/0ddum192/ Но у меня нет желоба. Кто-нибудь знает, что пошло не так? – clankill3r