Как добавить элементы верхнего края к class="row", используя фреймворк twitter bootstrap?
Twitter Bootstrap - добавить верхнее пространство между строками
Ответ 1
Редактирование или переопределение строки в загрузочной загрузке Twitter - это плохая идея, потому что это основная часть страниц, и вам понадобятся строки без верхнего поля.
Чтобы решить эту проблему, вместо этого создайте новый "верхний буфер" нового класса, который добавит необходимый вам стандартный маркер.
.top-buffer { margin-top:20px; }
И затем используйте его в div div, где вам нужен верхний край.
<div class="row top-buffer"> ...
Ответ 2
Хорошо только, чтобы вы знали, что произошло потом, я исправил использование некоторых новых классов, как говорит Акира выше:
.top5 { margin-top:5px; }
.top7 { margin-top:7px; }
.top10 { margin-top:10px; }
.top15 { margin-top:15px; }
.top17 { margin-top:17px; }
.top30 { margin-top:30px; }
всякий раз, когда я хочу, я делаю <div class="row top7"></div>
для лучшей отзывчивости вы можете добавить margin-top:7% вместо 5px, например: D
Ответ 3
Иногда margin-top может вызвать проблемы с дизайном:
http://www.w3.org/TR/CSS2/box.html#collapsing-margins
Итак, я рекомендую создавать классы "margin-bottom" вместо "margin-top classes" и применять их к предыдущему элементу.
Если вы используете Bootstrap, импортирующий файлы LESS Bootstrap, попробуйте определить классы полей margin с пропорциональными пространствами Bootstrap Theme:
.margin-bottom-xs {margin-bottom: ceil(@line-height-computed / 4);}
.margin-bottom-sm {margin-bottom: ceil(@line-height-computed / 2);}
.margin-bottom-md {margin-bottom: @line-height-computed;}
.margin-bottom-lg {margin-bottom: ceil(@line-height-computed * 2);}
Ответ 4
Я добавил эти классы в мою таблицу стилей загрузки
.voffset { margin-top: 2px; }
.voffset1 { margin-top: 5px; }
.voffset2 { margin-top: 10px; }
.voffset3 { margin-top: 15px; }
.voffset4 { margin-top: 30px; }
.voffset5 { margin-top: 40px; }
.voffset6 { margin-top: 60px; }
.voffset7 { margin-top: 80px; }
.voffset8 { margin-top: 100px; }
.voffset9 { margin-top: 150px; }
Пример
<div class="container">
<div class="row voffset2">
<div class="col-lg-12">
<p>
Vertically offset text.
</p>
</div>
</div>
</div>
Ответ 5
Я использую эти классы для изменения верхнего поля:
.margin-top-05 { margin-top: 0.5em; }
.margin-top-10 { margin-top: 1.0em; }
.margin-top-15 { margin-top: 1.5em; }
.margin-top-20 { margin-top: 2.0em; }
.margin-top-25 { margin-top: 2.5em; }
.margin-top-30 { margin-top: 3.0em; }
Когда мне нужно, чтобы элемент имел 2-кратное расстояние от элемента выше, я использую его следующим образом:
<div class="row margin-top-20">Something here</div>
Если вы предпочитаете пиксели, измените em на px так, чтобы они были на вашем пути.
Ответ 6
Если вам нужно отделить строки в bootstrap, вы можете просто использовать .form-group. Это добавляет 15px margin к нижней части строки.
В вашем случае, чтобы получить верхний край, вы можете добавить этот класс к предыдущему элементу .row
<div class="row form-group">
/* From bootstrap.css */
.form-group {
margin-bottom: 15px;
}
Ответ 7
Для параметра Bootstrap 4 следует использовать интервал
сокращенные классы
в следующем формате:
{property}{sides}-{size}
Итак, вы должны делать:
<div class="row mt-1">
Источник: https://v4-alpha.getbootstrap.com/utilities/spacing/
Ответ 8
Вы можете использовать следующий класс для начальной загрузки 4:
mt-0
mt-1
mt-2
mt-3
mt-4
...
Ссылка: https://v4-alpha.getbootstrap.com/utilities/spacing/
Ответ 9
Добавьте к этому классу в .css файле:
.row {
margin-left: -20px;
*zoom: 1;
margin-top: 50px;
}
или создайте новый класс и добавьте его в элемент
.rowSpecificFormName td {
margin-top: 50px;
}
Ответ 10
Bootstrap 4 alpha, для margin-top: сокращенные имена классов CSS mt-1, mt-2 (mt-lg-5, mt-sm-2) то же самое для нижнего, правого, левого, и у вас есть также автокласс ml-auto
<div class="mt-lg-1" ...>
Объединяется с 1 по 5: в переменных .scss что означает, что если вы установили mt-1, он даст .25rem верхнего края.
$spacers: (
0: (
x: 0,
y: 0
),
1: (
x: ($spacer-x * .25),
y: ($spacer-y * .25)
),
2: (
x: ($spacer-x * .5),
y: ($spacer-y * .5)
),
3: (
x: $spacer-x,
y: $spacer-y
),
4: (
x: ($spacer-x * 1.5),
y: ($spacer-y * 1.5)
),
5: (
x: ($spacer-x * 3),
y: ($spacer-y * 3)
)
) !default;
подробнее здесь
https://v4-alpha.getbootstrap.com/utilities/spacing/#horizontal-centering
Ответ 11
Если вы хотите изменить только одну страницу, добавьте следующее правило стиля:
#myCustomDivID .row {
margin-top:20px;
}
Ответ 12
В Bootstrap 4 alpha + вы можете использовать этот
class margin-bottom-5
Классы называются с использованием формата: {property}-{sides}-{size}
Ответ 13
Bootstrap3
CSS (только для желоба, без полей):
.row.row-gutter {
margin-bottom: -15px;
overflow: hidden;
}
.row.row-gutter > *[class^="col"] {
margin-bottom: 15px;
}
CSS (равные поля вокруг, 15px/2):
.row.row-margins {
padding-top: 7px; /* or margin-top: 7px; */
padding-bottom: 7px; /* or margin-bottom: 7px; */
}
.row.row-margins > *[class^="col"] {
margin-top: 8px;
margin-bottom: 8px;
}
Использование:
<div class="row row-gutter">
<div class="col col-sm-9">first</div>
<div class="col col-sm-3">second</div>
<div class="col col-sm-12">third</div>
</div>
(с SASS или LESS 15px может быть переменной из бутстрапа)
Ответ 14
just take a new class beside every row and apply css of margin-top: 20px;
here is the code below
<style>
.small-top
{
margin-top: 25px;
}
</style>
<div class="row small-top">
<div class="col-md-12">
</div>
</div>
Ответ 15
вы можете добавить этот код:
[class*="col-"] {
padding-top: 1rem;
padding-bottom: 1rem;
}
Ответ 16
старайтесь не переопределять существующие классы. его лучше создать новый класс с вашими желаемыми свойствами.
Чтобы решить эту проблему, вместо этого создайте новый класс "верхний край", который добавит требуемый стандартный маркер.
.top-margin{ margin-top:20px; }
И затем используйте его в div div, где вам нужен верхний край.
<div class="row top-margin">
использование структуры - хорошая практика. но не забывайте об основах. вы не можете на 100% зависеть от каких-либо заданий.
Ответ 17
Мой трюк. Не так чисто, но хорошо работает для меня.
<p> </p>