如何添加边缘顶部类="行"元素使用twitter引导框架?


当前回答

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

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

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

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

其他回答

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

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);}  

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

class margin-bottom-5

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

有一个技巧可以自动为容器中的第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>

取自官方样品。

只需简单地使用这个bs3-upgrade帮助空格和文本对齐…

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

<div class="row row-padding">

简单的代码