Css Twitter引导-在行之间添加顶部空间_Css_Twitter Bootstrap

Css Twitter引导-在行之间添加顶部空间

css twitter-bootstrap

Css Twitter引导-在行之间添加顶部空间,css,twitter-bootstrap,Css,Twitter Bootstrap,如何使用twitter引导框架将边距顶部添加到class=“row”元素？添加到.css文件中的此类： .row { margin-left: -20px; *zoom: 1; margin-top: 50px; } 或者创建一个新类并将其添加到元素中 .rowSpecificFormName td { margin-top: 50px; } 编辑或覆盖Twitter引导中的行是一个坏主意，因为这是页面支架的核心部分，您将需要没有上边距的行要解决这个问题，可

如何使用twitter引导框架将边距顶部添加到

class=“row”

元素？

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

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

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

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

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

要解决这个问题，可以创建一个新的类“TopBuffer”，添加您需要的标准边距

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

只要我愿意，我就做

为了获得更好的响应，您可以添加

margintop:7%

而不是

5px

，例如：D

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

.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-bottom-classes”而不是“margin-top-classes”，并将它们应用到前面的项目中

如果使用引导导入较少的引导文件，请尝试使用比例引导主题空间定义边距底部类：

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

我正在使用这些类来更改上边距：

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

当我需要一个元素与上面的元素有2米的间距时，我会这样使用它：

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

这里有些东西

如果您更喜欢像素，请将em更改为px以符合您的需要。

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

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

对于引导4应使用

速记实用程序类

格式如下：

{property}{sides}-{size}

其中，属性是：

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

其中，边是：

t-用于设置边距顶部或填充顶部的类
b-用于设置边距底部或填充底部的类
l-用于设置左边距或左边填充的类
r-用于设置右边距或右边填充的类
x-对于同时设置*-左和*-右的类
y-对于同时设置*-top和*-bottom的类
blank-用于在元素的所有4个边上设置边距或填充的类

其中，大小是以下各项之一：

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

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

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

...

请阅读下面的说明。

试一试下面的例子。

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

<p>&nbsp;</p>

Bootstrap 3 如果需要在引导中分隔行，只需使用

.formgroup

。这将在行的底部添加15px的边距

在您的情况下，要获得页边距顶部，可以将此类添加到上一个

.row

元素中

<div class="row form-group">

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


/*来自bootstrap.css*/
.表格组{
边缘底部：15px；
}

引导程序4 您可以使用内置的

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

引导4 alpha，用于页边顶部：简写CSS类名mt-1、mt-2（mt-lg-5、mt-sm-2）底部、右侧、左侧也一样，您还有自动类ml auto

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

在这里阅读更多

在引导程序4 alpha+中，您可以使用

class margin-bottom-5

这些类使用以下格式命名：

{property}-{sides}-{size}

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

mt-0

mt-1

mt-2

mt-3

mt-4

Ref:

只需在每一行旁边添加一个新类，并应用页边空白顶部的css:20px；
下面是代码
.小上衣
{
边缘顶部：25px；
}

Bootstrap3

CSS（仅限边沟，周围无边距）：

CSS（大约相等的边距，15px/2）：

用法：

<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或小于15px的情况，可能是bootstrap中的一个变量）

您可以添加以下代码：

[class*="col-"] {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

只需使用此bs3升级
帮助程序进行间距和文本对齐

如果您使用的是BootStrap 3.3.7，那么您可以通过NPM使用开源库BootStrap间隔器

npm install bootstrap-spacer

或者您可以访问github页面：

https://github.com/chigozieorunta/bootstrap-spacer

下面是一个使用.row间隔符类分隔行的示例：

<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间隔类：

<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间隔符和.row col间隔符类组合在一起：

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

简单代码

有一个技巧，可以自动为容器中的第2+行添加边距

.container行边距.row+.row{
页边顶部：1rem；
}

将

.container行边距

添加到容器中，将导致：

完整的HTML：


在容器外部进行div。
无上边距的行
上边距行
npm install bootstrap-spacer

https://github.com/chigozieorunta/bootstrap-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>

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

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

<div class="row row-padding">