如何減少用引導程序設計的行之間的間距

Question

我正在使用引導網格系統，我必須減少行之間的間距行間距太大，我該如何減少它。請幫忙。謝謝..

<div class="row"> 
    <div class="col-md-6"> 
    <h1 id="Heading"> Heading </h1> 
    <div class="row" style="margin-left:6px;"> 
     <div class="col-md-12"> 
     <div class="row"> 
      <div class="col-md-12"> 
      <div id="rect"> <span id="Heading" style="margin-left:15px;font-weight:bold; font-size: 18pt;color: #2373B3;"> Span </span> </div> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-12"> 
      <div id="rect"> <span id="Heading" style="margin-left:15px;font-weight:bold; font-size: 18pt;color: #2373B3;"> Span </span> </div> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-12"> 
      <div id="rect"> <span id="Heading" style="margin-left:15px;font-weight:bold; font-size: 18pt;color: #2373B3;"> Span </span> </div> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-12"> 
      <div id="rect"> <span id="Heading" style="margin-left:15px;font-weight:bold; font-size: 18pt;color: #2373B3;"> Span </span> </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
<div> 

Answer 1

默認情況下，行元素展開與他們的孩子有關。所以你的問題不是在.row類中，而是在#rect中

在rect元素上，默認情況下bootstrap css的行高爲1.4。讓它成爲一個類而不是id。

您可以將它降低到1.2 ... 在一個單獨的css文件中完成並覆蓋它。這對你來說會是一個更好的設計。

.rect {   
    line-height: 1.2; // overwrite it on a different css if you prefer   
} 

Answer 2

這有2個快速解決方案成爲可能：

1. 編輯引導核心的CSS /青菜，這將是一個糟糕的主意，因爲它會影響頁面的腳手架核心功能。
2. 寫一個單獨的類，並將其添加在你的DIV爲前：

.row底利潤{邊距：20像素; }

，你可以用它作爲

<div class="row row-bottom-margin"> 

選項1不建議直到除非你真的尋找這種變化在所有相關的地方被應用，也考慮你未來的設計。

希望這會有所幫助！

Answer 3

Twitter中bootstap存在默認邊距：15px的屬性中設置的網格的行之間system.You可以刪除此屬性或覆蓋margin屬性

<div class= "row marginRow"></div> 
Your Css  

    .marginRow{ 
    margin-bottom:0px !important; 
    } 

或只是刪除使用

任何餘量本

.marginRow{ 
    margin:0px !important; 
    } 

Answer 4

現在使用Bootstrap 4你不再需要使用任何CSS，因爲它有utility classes for this purpose。