在 Bootstrap 中如何增加行之间的顶部空间

在 twitter bootstrap 框架中如何为代码class="row"添加 top margin ?

806426 次浏览
小开

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

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

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

.rowSpecificFormName td {
margin-top: 50px;
}
小开
最佳答案

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

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

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

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

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

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

小开

我将这些类添加到引导样式表中

.voffset  { margin-top: 2px; }
.voffset1 { margin-top: 5px; }
.voffset2 { margin-top: 10px; }
.voffset3 { margin-top: 15px; }
.voffset4 { margin-top: 30px; }
.voffset5 { margin-top: 40px; }
.voffset6 { margin-top: 60px; }
.voffset7 { margin-top: 80px; }
.voffset8 { margin-top: 100px; }
.voffset9 { margin-top: 150px; }

例子

<div class="container">
<div class="row voffset2">
<div class="col-lg-12">
<p>
Vertically offset text.
</p>
</div>
</div>
</div>
小开

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

< a href = " http://www.w3.org/TR/CSS2/box.html collapsing-margins " > 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);}
小开

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

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

小开

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

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

对于引导4，应该使用

简写实用程序类

格式如下:

{财产}{双方}-{大小}

其中< < em >属性/ em >是其中之一:

  • M -用于设置边距的类
  • 用于设置填充的类

其中< em > < / em >两边是其中之一:

  • T -用于设置边距顶部或填充顶部的类
  • B -用于设置margin-bottom或padding-bottom的类
  • L -用于设置左边距或左填充的类
  • R -用于设置右边距或右填充的类
  • X -用于同时设置*-left和*-right的类
  • Y -用于同时设置*-top和*-bottom的类
  • Blank -用于在元素的四个边都设置了边距或填充的类

其中< em > < / em >大小是其中之一:

  • 0 -用于通过将其设置为0来消除空白或填充的类
  • 1 -(默认情况下)用于将margin或padding设置为$spacer * .25的类
  • 2 -(默认情况下)用于将margin或padding设置为$spacer *的类
  • 3 -(默认情况下)用于将margin或padding设置为$spacer的类
  • 4 -(默认情况下)用于将margin或padding设置为$spacer * 1.5的类
  • 5 -(默认情况下)用于将margin或padding设置为$spacer * 3的类
  • Auto -用于将边距设置为Auto的类

所以你应该做以下任何一件事:

<div class="row mt-1">
<div class="row mt-2">
...
<div class="row mt-5">

阅读文档以获得更多解释。

.

.
小开

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

<p>&nbsp;</p>
小开

引导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”使它只适用于“顶部”，有类似的类用于底部，左侧，右侧。数字定义了空间大小。

小开

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雷姆的边距。< / p > 
$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

小开

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

class margin-bottom-5

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

小开

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

< p > mt-0 mt-1 mt-2 mt-3 mt-4 …< / p >

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

小开 
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>
小开

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

小开

您可以添加以下代码:

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

只要简单地使用这个bs3-upgrade帮助器来进行空格和文本对齐…

https://github.com/studija/bs3-upgrade

小开

如果你正在使用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>
小开 
<div class="row row-padding">

简单的代码

小开

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

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

将.container-row-margin添加到容器中，结果是:

enter image description here

完整的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>

取自官方样品。

小开

引导5

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

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

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


提交答案