Twitter Bootstrap-добавление верхнего пространства между строками

Как добавить маржу сверху в class="row" элементы, использующие Twitter bootstrap framework?

17 ответов


редактирование или переопределение строки в Twitter bootstrap-плохая идея, потому что это основная часть лесов страниц, и вам понадобятся строки без верхнего поля.

чтобы решить эту проблему, вместо этого создайте новый класс "top-buffer", который добавляет стандартный запас, который вам нужен.

.top-buffer { margin-top:20px; }

а затем используйте его в строке divs, где вам нужно верхнее поле.

<div class="row top-buffer"> ...

Ok, чтобы вы знали, что произошло, я исправил использование некоторых новых классов, как 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


Bootstrap 3

Если вам нужно разделить строки в bootstrap, вы можете просто использовать .form-group. Это добавляет поле 15px в нижнюю часть строки.

в вашем случае, чтобы получить маржу сверху, вы можете добавить этот класс, чтобы элемент

<div class="row form-group">

/* From bootstrap.css */
.form-group {
        margin-bottom: 15px;
}

Bootstrap 4

вы можете использовать встроенный классы интервал

<div class="row mt-3"></div>

"t" в имени класса делает его применяться только к "верхней" стороне, есть аналогичные классы для нижней, левой, право. Число определяет размер пространства.


иногда margin-top может вызвать проблемы с дизайном:

http://www.w3.org/TR/CSS2/box.html#collapsing-margins

Итак, я рекомендую создать " маржинальные нижние классы "вместо" маржинальных верхних классов " и применить их к предыдущему элементу.

Если вы используете Bootstrap, импортирующий меньше файлов Bootstrap, попробуйте определить классы полей с пропорциональными пространствами темы Bootstrap:

.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);}  

я добавил эти классы в мою таблицу стилей bootstrap

.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>

на Bootstrap 4 интервал должен применяться с помощью

классы утилиты стенографии

в следующем формате:

{свойство}{борта}-{размер}

здесь свойства является:

  • m-для классов, которые устанавливают маржу
  • p-для классов, которые устанавливают заполнение

где сторон является:

  • t-для классов, которые устанавливают margin-top или padding-top
  • b-для классов, которые устанавливают маржу-дно или заполнение-дно
  • l-для классов, которые устанавливают поле-влево или отступ-влево
  • r-для классов, которые устанавливают margin-right или padding-right
  • x-для классов, которые устанавливают как * - влево, так и * - вправо
  • y-для классов, которые устанавливают оба * - top и *-дно!--23-->
  • blank - для классов, которые устанавливают поля или отступы на всех 4 сторонах элемента

здесь в размере является:

  • 0 - для классов, которые устраняют поля и отступы, установив его в 0
  • 1 - (по умолчанию) для классов, которые устанавливают маржу или заполнение в $spacer * .25
  • 2 - (по умолчанию) для классов, которые устанавливают маржу или заполнение в $spacer * .5
  • 3 - (по умолчанию) для классов, которые устанавливают маржу или заполнение в $spacer
  • 4 - (по умолчанию) для классов, которые устанавливают маржу или заполнение в $spacer * 1.5
  • 5 - (по умолчанию) для классов, которые устанавливают маржу или заполнение в $spacer * 3
  • auto-для классов, которые устанавливают маржу auto

таким образом, вы должны делать любой из них:

<div class="row mt-1">
<div class="row mt-2">
          ...
<div class="row mt-5">

читать docs для получения дополнительных объяснений.


Я использую эти классы для изменения верхнего поля:

.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>

Если вы предпочитаете пиксели, измените em на px, чтобы это было по-вашему.


вы можете использовать следующий класс для Bootstrap 4:

mt-0 mt-1 mt-2 mt-3 mt-4 ...

Ref:https://v4-alpha.getbootstrap.com/utilities/spacing/


Bootstrap 4 alpha, для margin-top: сокращенные имена классов CSS mt - 1, mt-2 ( mt-lg-5, mt-sm-2) то же самое для нижней, правой, левой, и у вас также есть авто класс ml-auto

    <div class="mt-lg-1" ...>

блоки из 1 to 5 : в переменные.СКС это означает, что если вы установите 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


добавить к этому классу в .css файл:

.row {
    margin-left: -20px;
    *zoom: 1;
    margin-top: 50px;
}

или создайте новый класс и добавьте его в элемент

.rowSpecificFormName td {
    margin-top: 50px;
}

Если вы хотите изменить только на одной странице, добавьте следующее правило стиля:

 #myCustomDivID .row {
     margin-top:20px;
 }

в 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 или менее 15px может быть переменной из bootstrap)


вы можете добавить этот код :

[class*="col-"] {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

просто используйте это bs3-upgrade хелпер для дистанционирований и aligment текста...

https://github.com/studija/bs3-upgrade


мой трюк. Не так чисто, но хорошо работает для меня

<p>&nbsp;</p>