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


当前回答

对于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">

更多的解释请阅读文档。 在这里试试现场的例子。

其他回答

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

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

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

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

在.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"> ...

对于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">

更多的解释请阅读文档。 在这里试试现场的例子。