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

如何使用twitter bootstrap框架将margin添加到class="row"元素？

---

#1楼

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

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

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

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

---

#2楼

编辑或覆盖Twitter引导程序中的行是一个坏主意，由于这是页脚手架的核心部分，您将须要没有上边距的行。

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

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

而后在须要上边距的行div上使用它。

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

---

#3楼

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

---

#4楼

我将这些类添加到个人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>

---

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