Ответы:
Редактирование или переопределение строки в загрузчике Twitter - плохая идея, потому что это основная часть скаффолдинга страницы, и вам понадобятся строки без верхнего поля.
Чтобы решить эту проблему, вместо этого создайте новый класс "top-buffer", который добавляет стандартное поле, которое вам нужно.
.top-buffer { margin-top:20px; }А затем используйте его в строке div, где вам нужно верхнее поле.
<div class="row top-buffer"> ...Хорошо, просто чтобы вы знали, что произошло тогда, я исправил использование некоторых новых классов, как говорит Acyra выше:
.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
.top-buffer { margin-top:20px; }отличается от .top30 { margin-top:30px; }? Ну, с точки зрения любого разработчика: это то же самое. Настройки в соответствии с вариантом использования здесь не учитываются. Особенно нет, если ОП ответил на свой вопрос.
Если вам нужно разделить строки в начальной загрузке, вы можете просто использовать .form-group. Это добавляет запас в 15px в конец строки.
В вашем случае, чтобы получить маржу top, вы можете добавить этот класс к предыдущему .rowэлементу.
<div class="row form-group">
/* From bootstrap.css */
.form-group {
margin-bottom: 15px;
}Вы можете использовать встроенные интервальные классы
<div class="row mt-3"></div>Буква «t» в названии класса делает его применимым только к «верхней» стороне, есть аналогичные классы для нижней, левой, правой. Число определяет размер пространства.
form-groupвсе еще присутствует , но были добавлены специальные классы для полей / отступов, которые могут выполнять эту работу и имеют больше опций.
mt-3не работает так, привыкform-group
Для Bootstrap 4 интервал следует применять, используя
сокращенные служебные классы
в следующем формате:
{Свойство} {стороны} - {размер}
Где свойство является одним из:
Где стороны является одним из:
Где размер является одним из:
Так что вы должны делать что-то из этого:
<div class="row mt-1">
<div class="row mt-2">
...
<div class="row mt-5">Прочитайте документы для получения дополнительной информации. Попробуйте живые примеры здесь .
Иногда margin-top может вызвать проблемы с дизайном:
http://www.w3.org/TR/CSS2/box.html#collapsing-margins
Итак, я рекомендую создать «классы маржинального дна» вместо «классы маржинального верха» и применить их к предыдущему элементу.
Если вы используете Bootstrap для импорта файлов LESS Bootstrap, попробуйте определить классы полей с пропорциональными пробелами 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);} Я добавил эти классы в мою таблицу стилей начальной загрузки
.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>Я использую эти классы для изменения верхнего поля:
.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; }Когда мне нужно, чтобы элемент имел расстояние 2em от элемента выше, я использую его следующим образом:
<div class="row margin-top-20">Something here</div>Если вы предпочитаете пиксели, измените их на px, чтобы они были по-вашему.
<div class="row margin-top-20">более <div class"row" style="margin-top: 2.0em">?
Вы можете использовать следующий класс для начальной загрузки 4:
mt-0
mt-1
mt-2
mt-3
mt-4
...
Ссылка: https://v4-alpha.getbootstrap.com/utilities/spacing/
Bootstrap 4 alpha, для margin-top: сокращенные имена классов CSS mt-1, mt-2 (mt-lg-5, mt-sm-2) одинаковы для нижнего, правого, левого и у вас также есть автоматический класс ml- авто
<div class="mt-lg-1" ...>Единицы измерения от : 1до 5: в переменной .scss, что означает, что если вы установите mt-1, это даст .25rem поля margin.
$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
Добавьте к этому классу в файле .css:
.row {
margin-left: -20px;
*zoom: 1;
margin-top: 50px;
}или создайте новый класс и добавьте его к элементу
.rowSpecificFormName td {
margin-top: 50px;
}В Bootstrap 4 alpha + вы можете использовать это
class margin-bottom-5Классы названы в формате: {property}-{sides}-{size}
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>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 может быть переменной из начальной загрузки)
<div class="row row-padding">простой код
Просто используйте это bs3-upgrade помощник для интервалов и выравнивания текста ...
Если вы используете BootStrap 3.3.7, вы можете использовать библиотеку с открытым исходным кодом bootstrap-spacer через NPM
npm install bootstrap-spacerили вы можете посетить страницу GitHub:
https://github.com/chigozieorunta/bootstrap-spacerВот пример того, как это работает для разделения строк с помощью класса .row-spacer:
<div class="row row-spacer">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
<div class="row row-spacer">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>Если вам потребуется пробел между столбцами, вы также можете добавить класс .row-col-spacer:
<div class="row row-col-spacer">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>Также вы можете комбинировать различные классы .row-spacer и .row-col-spacer:
<div class="row row-spacer row-col-spacer">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>