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


当前回答

如果您只想在一个页面上更改,请添加以下样式规则:

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

其他回答

我的技巧。不是很干净,但对我来说还行

<p>&nbsp;</p>

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的变量)

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

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

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

引导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会导致设计问题:

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);}