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


Ответы:


801

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

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

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

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

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

45
Редактирование собственной строки не подходит для фреймворка, и новый класс должен просто дополнять класс строки ... это небольшая разница, но в Twitter Bootstrap строка имеет определенную роль макета страницы. Во всяком случае, я просто пытаюсь помочь, мое решение является рабочим решением проблемы.
Acyra

11
Ни в коем случае эти ответы немного отличаются ИМХО. Этот вариант более удобен, так как включает в себя «назовите свой стиль класса, чтобы ваш html читался легче», и вы можете прочитать margin-top в html вместо rowSpecificForName. Этот ответ больше соответствует шаблонам начальной загрузки Twitter.
Дин Хиллер

2
Они собираются добавить определенные классы вертикального интервала в Bootstrap 4: github.com/twbs/bootstrap/issues/4286
icc97

2
Все, что я узнал из этих комментариев, это то, что разработчики очень самоуверенны, и некоторые предпочитают 2 + 3 = 5, а другие 3 + 2 = 5. Продолжая ...
Фабио С.

3
@FabioS. Следует учесть, что для такой инфраструктуры, как Bootstrap, редактирование нативного кода или перезапись это плохая идея. Сценарии бесконечны, но вот пара примеров. a.) перезапись - если вы перезаписали класс .row, вам нужно пройтись по своему проекту и добавить дополнительный класс в строки, которые не должны получать поля b.) редактировать нативный код - вы наследуете проект на работе и хотите перейти на bootstrap4; OOPS! Ничего не выглядит правильно !? Теперь у вас есть бремя прохождения файла начальной загрузки 3, пытаясь найти то, что на земле изменил предыдущий разработчик.
Peroija

176

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


13
Я чувствую, что это решение намного элегантнее, чем принятое решение.
rdiaz82

72
Это то же самое.
Александр

@alexander, но более общий.
Ejaz

6
Чем .top-buffer { margin-top:20px; }отличается от .top30 { margin-top:30px; }? Ну, с точки зрения любого разработчика: это то же самое. Настройки в соответствии с вариантом использования здесь не учитываются. Особенно нет, если ОП ответил на свой вопрос.
Александр

2
Классический верхний край 17px; Очень полезный.
adripanico

129

Bootstrap 3

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

В вашем случае, чтобы получить маржу top, вы можете добавить этот класс к предыдущему .rowэлементу.

<div class="row form-group">

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

Bootstrap 4

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

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

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


Была ли группа форм снята с BS4?
З. Хулла

3
Нет, form-groupвсе еще присутствует , но были добавлены специальные классы для полей / отступов, которые могут выполнять эту работу и имеют больше опций.
Букси

Было ли несколько изменений в Bootstrap V 4? Я сейчас на версии 4 и mt-3не работает так, привыкform-group
Ник Швадерер

Это должно работать , проверьте, содержит ли начальная загрузка css, которую вы связали с вашим проектом, определение класса ".mt-3".
Букси

82

Для Bootstrap 4 интервал следует применять, используя

сокращенные служебные классы

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

{Свойство} {стороны} - {размер}

Где свойство является одним из:

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

Где стороны является одним из:

  • t - для классов, которые устанавливают margin-top или padding-top
  • б - для классов, которые устанавливают margin-bottom или padding-bottom
  • l - для классов, которые устанавливают margin-left или padding-left
  • r - для классов, которые устанавливают margin-right или padding-right
  • x - для классов, которые устанавливают как * -left, так и * -right
  • y - для классов, которые устанавливают как * -top, так и * -ottom
  • пусто - для классов, которые устанавливают поля или отступы на всех 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">

Прочитайте документы для получения дополнительной информации. Попробуйте живые примеры здесь .


3
Это должен быть принятый ответ сейчас с выпуском Bootstrap 4. Он поставляется с этими встроенными классами, нет необходимости создавать новые.
Мэтт К

45

Иногда 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);}  

33

Я добавил эти классы в мою таблицу стилей начальной загрузки

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

27

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

.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, чтобы они были по-вашему.


6
Хорошая идея, но я отвожу цифры, поскольку они слишком конкретны. Если вы придерживаетесь абстракций, таких как s, m, l, xl, xxl и т. Д., Вы можете изменить размеры с помощью css без необходимости менять имена в шаблонах.
Майк Перселл

1
@MikePurcell Хорошая мысль, и это может быть правильным решением для вас. Но я предпочитаю более точный способ определения полей. Использование em вместо px дает мне свободный способ достичь этого, не становясь слишком конкретным.
Гексодус

3
Какие преимущества от <div class="row margin-top-20">более <div class"row" style="margin-top: 2.0em">?
icc97

@ icc97 В принципе, отдельные проблемы, но здесь вы можете увидеть другие мнения: stackoverflow.com/a/2612494/1683224 .
Wiley Marques

@WileyMarques Это верно для класса с именем, например, "top-buffer" (как в принятом ответе), но не имеет смысла для класса с именем margin-top-20. Если вы не рады тому, что margin-top-20 фактически добавит что-то кроме 2ems для отступов, что может привести к путанице.
телем


4

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


3

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

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

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

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

7
хммммм, мне не нравится работать с CSS, что если мне нужны строки без полей на других страницах?
12:30

Вы могли бы сделать новый класс .rowSpecificForm
Нильсен Рамон

2
Но в Twitter Bootstrap нет определенного класса css для только 'margin-top'.
Нильсен Рамон

странно, что они не установили несколько классов для вертикального пространства, мне нужно добавить их, другого решения нет: /, спасибо Нильсен
его

8
помните каскады CSS, поэтому вам никогда не придется редактировать bootstrap.css.
ONOZ

1

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

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

1

В Bootstrap 4 alpha + вы можете использовать это

class margin-bottom-5

Классы названы в формате: {property}-{sides}-{size}


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

Пожалуйста, добавьте объяснения к вашему ответу. Отвечать без объяснений бесполезно.
ADreNaLiNe-DJ

1

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 может быть переменной из начальной загрузки)



0

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

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


0

Если вы используете 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>

1
Я бы посоветовал не добавлять зависимости для 40 строк CSS
Andrew Diamond

-3

Мой трюк Не очень чистый, но у меня хорошо работает

<p>&nbsp;</p>
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.