Twitter Bootstrap - 在行之间添加顶部空间

Question

如何class="row"使用twitter bootstrap框架为元素添加边距？

Answer 1

编辑或覆盖Twitter引导程序中的行是一个坏主意,因为这是页脚手架的核心部分,您将需要没有上边距的行.

要解决此问题,请创建一个新类"top-buffer",以添加所需的标准边距.

.top-buffer { margin-top:20px; }

然后在需要上边距的行div上使用它.

<div class="row top-buffer"> ...

Answer 2

好的,只是为了让你知道发生了什么,我修复了一些新的类,正如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

Answer 3

Bootstrap 3

如果需要在bootstrap中分隔行,则可以使用.form-group.这会在行的底部增加15px的余量.

在您的情况下,要获得保证金最高,您可以将此类添加到前一个.row元素

<div class="row form-group">

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

Bootstrap 4

您可以使用内置的间距类

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

类名中的"t"使其仅适用于"顶部"侧,底部,左侧,右侧都有类似的类.该数字定义了空间大小.

Answer 4

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

阅读文档以获得更多解释.在这里尝试实例.

Answer 5

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

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

所以,我建议创建"margin-bottom classes"而不是"margin-top classes",并将它们应用到上一个项目.

如果您使用Bootstrap导入LESS Bootstrap文件,请尝试使用比例Bootstrap Theme空间定义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);}  

Answer 6

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

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

Answer 7

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

.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以使其符合您的要求.

Answer 8

您可以将以下类用于bootstrap 4:

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

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

Answer 9

Bootstrap 4 alpha，用于 margin-top：简写 CSS 类名称 mt-1、mt-2 (mt-lg-5、mt-sm-2) 与底部、右侧、左侧相同，并且您还有自动类 ml-汽车

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

在变量.scss 中，单位是从1到: ，这意味着如果您设置 mt-1，它会给出 0.25rem 的边距顶部。5

$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