如何添加边缘顶部类="行"元素使用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>

其他回答

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

<p>&nbsp;</p>

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

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

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

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

引导5

在Bootstrap 5中,你可以这样做:

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

其中X是从0(没有空格)到5(有很多空格)之间的数字。关于不同的边距/填充大小和特定于断点的控件的更多信息,请查看文档。

如果你正在使用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>

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