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

363

Как добавить элементы верхнего края к class="row", используя фреймворк twitter bootstrap?

17 ответов

676
Лучший ответ

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

Чтобы решить эту проблему, вместо этого создайте новый "верхний буфер" нового класса, который добавит необходимый вам стандартный маркер.

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

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

<div class="row top-buffer"> ...
  • 0
    Нильсен говорит, что нужно использовать новый класс или редактировать нативный .row ... вы реплицируете, я думаю: P
  • 43
    Редактирование собственной строки не подходит для фреймворка, и новый класс должен просто дополнять класс строки ... это небольшая разница, но в Twitter Bootstrap строка имеет определенную роль макета страницы. Во всяком случае, я просто пытаюсь помочь, мое решение является рабочим решением проблемы.
Показать ещё 5 комментариев
152

Хорошо только, чтобы вы знали, что произошло потом, я исправил использование некоторых новых классов, как говорит Акира выше:

.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
    Я чувствую, что это решение намного элегантнее, чем принятое решение.
  • 65
    Это то же самое.
Показать ещё 4 комментария
39

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

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

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

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

.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
    Хорошая идея, но я отвожу цифры, поскольку они слишком конкретны. Если вы придерживаетесь абстракций, таких как s, m, l, xl, xxl и т. Д., Вы можете изменить размеры с помощью css, не изменяя имена в шаблонах.
  • 1
    @MikePurcell Хорошая мысль, и это может быть правильным решением для вас. Но я предпочитаю более точный способ определения полей. Использование em вместо px дает мне свободный способ достичь этого, не становясь слишком конкретным.
Показать ещё 5 комментариев
14

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

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

<div class="row form-group">

/* From bootstrap.css */
.form-group {
        margin-bottom: 15px;
}
  • 0
    Была ли группа форм снята с BS4?
  • 3
    Нет, form-group все еще присутствует , но были добавлены специальные классы для полей / отступов, которые могут выполнять эту работу и имеют больше опций.
Показать ещё 3 комментария
13

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

сокращенные классы

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

{property}{sides}-{size}

Итак, вы должны делать:

<div class="row mt-1">

Источник: https://v4-alpha.getbootstrap.com/utilities/spacing/

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

Вы можете использовать следующий класс для начальной загрузки 4:

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

Ссылка: https://v4-alpha.getbootstrap.com/utilities/spacing/

3

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

3

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

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

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

.rowSpecificFormName td {
    margin-top: 50px;
}
  • 7
    хммммм, мне не нравится работать с CSS, что если мне нужны строки без полей на других страницах?
  • 0
    это редактировать CSS единственное решение?
Показать ещё 7 комментариев
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 может быть переменной из бутстрапа)

1

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

class margin-bottom-5

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

1

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

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

старайтесь не переопределять существующие классы. его лучше создать новый класс с вашими желаемыми свойствами.

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

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

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

<div class="row top-margin"> 

использование структуры - хорошая практика. но не забывайте об основах. вы не можете на 100% зависеть от каких-либо заданий.

0

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

[class*="col-"] {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
0
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>
  • 0
    Пожалуйста, добавьте объяснения к вашему ответу. Отвечать без объяснений бесполезно.
-3

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

<p>&nbsp;</p>
  • 3
    Избегайте использования семантических элементов для стилизации.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню