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


当前回答

如果你正在使用BootStrap 3.3.7,你可以通过NPM使用开源库BootStrap -spacer

npm install bootstrap-spacer

或者你可以访问github页面:

https://github.com/chigozieorunta/bootstrap-spacer

下面是一个使用.row-spacer类对行进行空格的示例:

<div class="row row-spacer">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

<div class="row row-spacer">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

如果你需要列之间有空格,你也可以添加.row-col-spacer类:

<div class="row row-col-spacer">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

你也可以把各种各样的.row-spacer和.row-col-spacer类组合在一起:

<div class="row row-spacer row-col-spacer">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

其他回答

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

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

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

在Twitter引导中编辑或重写行是一个坏主意,因为这是页面脚手架的核心部分,您将需要没有顶部边距的行。

要解决这个问题,可以创建一个新类“top-buffer”,添加所需的标准裕度。

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

然后在需要上边距的行div上使用它。

<div class="row top-buffer"> ...

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