推特引导-增加行之间的顶部空间

如何添加边缘顶部类="行"元素使用twitter引导框架?

当前回答

我正在使用这些类来修改上边距:

.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有你的方式。

2014-08-09 18:14:02

其他回答

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可以是bootstrap的变量)

2017-08-15 17:26:17

你可以使用下面的类进行引导4:

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

裁判:https://v4-alpha.getbootstrap.com/utilities/spacing/

2017-06-16 08:18:30

Bootstrap 4 alpha，用于margin-top: CSS类名的简写mt-1, mt-2 (mt-lg-5, mt-sm-2) 底部也一样，右，左，还有auto类ml-auto

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

在变量.scss中，单位从1到5 这意味着如果你设置mt-1它会给出。25雷姆的边距。

$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

2017-02-20 16:40:51

在Bootstrap 4 alpha+中你可以使用这个