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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/10085723/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 03:33:22  来源:igfitidea点击:

Twitter Bootstrap - add top space between rows

csstwitter-bootstrap

提问by itsme

How to add margin top to class="row"elements using twitter bootstrap framework?

如何class="row"使用 twitter bootstrap 框架向元素添加边距顶部?

回答by Acyra

Editing or overriding the row in Twitter bootstrap is a bad idea, because this is a core part of the page scaffolding and you will need rows without a top margin.

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

To solve this, instead create a new class "top-buffer" that adds the standard margin that you need.

要解决此问题,请创建一个新类“top-buffer”,以添加您需要的标准边距。

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

And then use it on the row divs where you need a top margin.

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

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

回答by itsme

Ok just to let you know what's happened then, i fixed using some new classes as Acyra says above:

好的,只是为了让您知道发生了什么,我修复了使用一些新类的问题,如 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; }

whenever i want i do <div class="row top7"></div>

每当我想要我做 <div class="row top7"></div>

for better responsive you can add margin-top:7%instead of 5pxfor example :D

为了更好的响应,您可以添加margin-top:7%而不是5px例如:D

回答by Buksy

Bootstrap 3

引导程序 3

If you need to separate rows in bootstrap, you can simply use .form-group. This adds 15px margin to the bottom of row.

如果您需要在引导程序中分隔行,您可以简单地使用.form-group. 这会在行的底部增加 15px 的边距。

In your case, to get margin top, you can add this class to previous .rowelement

在您的情况下,要获得边距顶部,您可以将此类添加到上一个.row元素

<div class="row form-group">

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

Bootstrap 4

引导程序 4

You can use built-in spacing classes

您可以使用内置间距类

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

The "t" in class name makes it apply only to "top" side, there are similar classes for bottom, left, right. The number defines space size.

类名中的“t”使其仅适用于“顶部”侧,底部、左侧、右侧也有类似的类。该数字定义了空间大小。

回答by Rajkaran Mishra

For Bootstrap 4spacing should be applied using

对于Bootstrap 4间距应使用

shorthand utility classes

速记实用程序类

in the following format:

格式如下:

{property}{sides}-{size}

{property}{sides}-{size}

Where propertyis one of:

其中财产是一个:

  • m - for classes that set margin
  • p - for classes that set padding
  • m - 对于设置边距的类
  • p - 对于设置填充的类

Where sidesis one of:

其中是以下之一:

  • t - for classes that set margin-top or padding-top
  • b - for classes that set margin-bottom or padding-bottom
  • l - for classes that set margin-left or padding-left
  • r - for classes that set margin-right or padding-right
  • x - for classes that set both *-left and *-right
  • y - for classes that set both *-top and *-bottom
  • blank - for classes that set a margin or padding on all 4 sides of the element
  • 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 个边上设置边距或填充的类

Where sizeis one of:

其中size是以下之一:

  • 0 - for classes that eliminate the margin or padding by setting it to 0
  • 1 - (by default) for classes that set the margin or padding to $spacer * .25
  • 2 - (by default) for classes that set the margin or padding to $spacer * .5
  • 3 - (by default) for classes that set the margin or padding to $spacer
  • 4 - (by default) for classes that set the margin or padding to $spacer * 1.5
  • 5 - (by default) for classes that set the margin or padding to $spacer * 3
  • auto - for classes that set the margin to auto
  • 0 - 对于通过将其设置为 0 来消除边距或填充的类
  • 1 -(默认情况下)对于将边距或填充设置为 $spacer * .25 的类
  • 2 -(默认情况下)对于将边距或填充设置为 $spacer * .5 的类
  • 3 -(默认情况下)用于将边距或填充设置为 $spacer 的类
  • 4 -(默认情况下)对于将边距或填充设置为 $spacer * 1.5 的类
  • 5 -(默认情况下)用于将边距或填充设置为 $spacer * 3 的类
  • auto - 对于将边距设置为自动的类

So you should be doing any of these:

因此,您应该执行以下任一操作:

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

Read the docsfor more explanation. Try live examples over here.

阅读文档以获得更多解释。在这里尝试现场示例。

回答by kurroman

Sometimes margin-top can causes design problems:

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

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

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

So, i recommend create "margin-bottom classes" instead of "margin-top classes" and apply them to the previous item.

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

If you are using Bootstrap importing LESS Bootstrap files try to define the margin-bottom classes with proportional Bootstrap Theme spaces:

如果您使用 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);}  

回答by srmilon

I added these classes to my bootstrap stylesheet

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

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

Example

例子

<div class="container">
  <div class="row voffset2">
    <div class="col-lg-12">
      <p>
        Vertically offset text.
      </p>
    </div>
  </div>
</div>

回答by Hexodus

I'm using these classes to alter top margin:

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

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

When I need an element to have 2em spacing from the element above I use it like this:

当我需要一个元素与上面的元素有 2em 间距时,我会像这样使用它:

<div class="row margin-top-20">Something here</div>

If you prefere pixels so change the em to px to have it your way.

如果您更喜欢像素,请将 em 更改为 px 以按照您的方式进行。

回答by Smilefounder

You can use the following class for bootstrap 4:

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

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

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

Ref: https://v4-alpha.getbootstrap.com/utilities/spacing/

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

回答by Sherif SALEH

Bootstrap 4 alpha, for margin-top: shorthand CSS class names mt-1, mt-2 ( mt-lg-5, mt-sm-2) same for the bottom, right, left, and you have also auto class ml-auto

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

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

Units are from 1to 5: in the variables.scss which means if you set mt-1 it gives .25rem of margin top.

单位是从15:在 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;

read-more here

在这里阅读更多

https://v4-alpha.getbootstrap.com/utilities/spacing/#horizontal-centering

https://v4-alpha.getbootstrap.com/utilities/spacing/#horizo​​ntal-centering

回答by Nielsen Ramon

Add to this class in the .css file:

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

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

or make a new class and add it to the element

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

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