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