如何class="row"使用Twitter Bootstrap框架向元素添加边距顶部？

在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

引导程序3

如果您需要在引导程序中分隔行，则只需使用即可.form-group。这会将15px的边距添加到行的底部。

对于您的情况，要获得最高利润，可以将此类添加到上一个.row元素

<div class="row form-group">

/* From bootstrap.css */
.form-group {
        margin-bottom: 15px;
}

引导程序4

您可以使用内置的间距类

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

类名中的“ t”使其仅适用于“上”侧，下，左，右也有类似的类。该数字定义空间大小。

对于Bootstrap 4，应使用

速记实用程序类

格式如下：

{属性} {面}-{大小}

其中财产是以下之一：

• m-对于设置边距的类
• p-用于设置填充的类

其中边是以下之一：

• t-对于设置margin-top或padding-top的类
• b-对于设置margin-bottom或padding-bottom的类
• l-对于设置margin-left或padding-left的类
• r-对于设置margin-right或padding-right的类
• x-对于同时设置* -left和* -right的类
• y-对于同时设置* -top和* -bottom的类
• 空白-用于在元素的所有4个面上设置边距或填充的类

其中大小是以下之一：

• 0-对于通过将其设置为0消除边距或填充的类
• 1-（默认情况下）用于将边距或填充设置为$ spacer * .25的类
• 2-（默认情况下）用于将边距或填充设置为$ spacer * .5的类
• 3-（默认情况下）用于将边距或填充设置为$ spacer的类
• 4-（默认情况下）用于将边距或填充设置为$ spacer * 1.5的类
• 5-（默认情况下）用于将边距或填充设置为$ spacer * 3的类
• auto-用于将边距设置为auto的类

因此，您应该执行以下任一操作：

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

阅读文档以获取更多说明。在这里尝试现场示例。

有时，页边空白可能会导致设计问题：

http://www.w3.org/TR/CSS2/box.html#collapsing-margins

因此，我建议创建“ margin-bottom类”而不是“ margin-top类”，并将它们应用于上一个项目。

如果您正在使用Bootstrap导入LESS Bootstrap文件，请尝试使用比例Bootstrap主题空间定义margin-bottom类：

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

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

.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-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即可。

您可以将以下类用于引导程序4：

mt-0 mt-1 mt-2 mt-3 mt-4 ...

参考：https : //v4-alpha.getbootstrap.com/utilities/spacing/

Bootstrap 4 Alpha，用于上边距：速记CSS类名称mt-1，mt-2（mt-lg-5，mt-sm-2），其底部，右侧，左侧相同，并且您还具有自动类ml-汽车

    <div class="mt-lg-1" ...>

单位从from 1到5：在variables.scss中，这意味着如果您设置mt-1，则会提供.25rem的页边距上限。

$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/#horizo​​ntal-centering

在.css文件中添加到此类：

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

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

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

如果只想在一页上进行更改，请添加以下样式规则：

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

在Bootstrap 4 alpha +中，您可以使用此功能

class margin-bottom-5

这些类使用以下格式命名： {property}-{sides}-{size}

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可能是引导程序中的变量）

<div class="row row-padding">

简单的代码

您可以添加以下代码：

[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>

我的把戏 不太干净，但是对我来说很好

<p>&nbsp;</p>