如何添加边缘顶部类="行"元素使用twitter引导框架?
当前回答
只需简单地使用这个bs3-upgrade帮助空格和文本对齐…
https://github.com/studija/bs3-upgrade
其他回答
我正在使用这些类来修改上边距:
.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,用于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
我的技巧。不是很干净,但对我来说还行
<p> </p>
有一个技巧可以自动为容器中的第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>
取自官方样品。
对于Bootstrap 4,间距应该使用
简写实用程序类
格式如下:
{财产}{双方}-{大小}
其中财产是其中之一:
M -用于设置边距的类 用于设置填充的类
其中边是其中之一:
T -用于设置边距顶部或填充顶部的类 B -用于设置margin-bottom或padding-bottom的类 L -用于设置左边距或左填充的类 R -用于设置右边距或右填充的类 X -用于同时设置*-left和*-right的类 Y -用于同时设置*-top和*-bottom的类 Blank -用于在元素的四个边都设置了边距或填充的类
其中size为其中之一:
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">
更多的解释请阅读文档。 在这里试试现场的例子。