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

其他回答

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

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

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

class margin-bottom-5

类的命名格式为:{property}-{sides}-{size}

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

有一个技巧可以自动为容器中的第2 +行添加边距。

.container-row-margin .row + .row {
    margin-top: 1rem;
}

将.container-row-margin添加到容器中,结果如下:

完整的HTML:

<div class="bg-secondary text-white">
    div outside of the container.
</div>
<div class="container container-row-margin">
    <div class="row">
        <div class="col col-4 bg-warning">
            Row without top margin
        </div>
    </div>
    <div class="row">
        <div class="col col-4 bg-primary text-white">
            Row with top margin
        </div>
    </div>
    <div class="row">
        <div class="col col-4 bg-primary text-white">
            Row with top margin
        </div>
    </div>
</div>
<div class="bg-secondary text-white">
    div outside of the container.
</div>

取自官方样品。

just take a new class beside every row and apply css of margin-top: 20px;
here is the code below
<style>
  .small-top
   {
     margin-top: 25px;  
   }
</style>    
<div class="row small-top">
   <div class="col-md-12">
   </div>
 </div>