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

如何添加边缘顶部类="行"元素使用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”使它只适用于“顶部”，有类似的类用于底部，左侧，右侧。数字定义了空间大小。

2017-02-08 14:29:21

其他回答

有时候margin-top会导致设计问题:

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

所以，我建议创建“margin-bottom classes”而不是“margin-top classes”，并将它们应用到前一项。

如果你正在使用Bootstrap导入LESS 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);}

2014-07-30 06:58:38

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

好吧，只是让你知道发生了什么，我固定使用一些新的类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

2013-11-20 12:39:01

您可以添加以下代码:

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

2017-11-21 21:06:03

引导3