如何添加边缘顶部类="行"元素使用twitter引导框架?
当前回答
你可以使用下面的类进行引导4:
mt-0 mt-1 mt-2 mt-3 mt-4 ...
裁判:https://v4-alpha.getbootstrap.com/utilities/spacing/
其他回答
在Bootstrap 4 alpha+中你可以使用这个
class margin-bottom-5
类的命名格式为:{property}-{sides}-{size}
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
有一个技巧可以自动为容器中的第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>
取自官方样品。
在.css文件中添加到这个类:
.row {
margin-left: -20px;
*zoom: 1;
margin-top: 50px;
}
或者创建一个新类并将其添加到元素中
.rowSpecificFormName td {
margin-top: 50px;
}
<div class="row row-padding">
简单的代码