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


当前回答

引导3

如果需要在引导中分离行,可以简单地使用.form-group。这将在行底部添加15px的边缘。

在您的例子中,要获得margin top,可以将这个类添加到之前的.row元素中

<div class="row form-group">

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

引导4

您可以使用内置间距类

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

类名中的“t”使它只适用于“顶部”,有类似的类用于底部,左侧,右侧。数字定义了空间大小。

其他回答

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

在.css文件中添加到这个类:

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

或者创建一个新类并将其添加到元素中

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

您可以添加以下代码:

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

引导3

如果需要在引导中分离行,可以简单地使用.form-group。这将在行底部添加15px的边缘。

在您的例子中,要获得margin top,可以将这个类添加到之前的.row元素中

<div class="row form-group">

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

引导4

您可以使用内置间距类

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

类名中的“t”使它只适用于“顶部”,有类似的类用于底部,左侧,右侧。数字定义了空间大小。

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

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