如何減少Twitter Bootstrap中兩行/容器之間的空白？

我在兩個容器中有兩行，但我不知道如何減少底部和頂部邊距/填充以使內容更接近。如何減少Twitter Bootstrap中兩行/容器之間的空白？

bottom content是太遠了，我想把它靠近第一行/容器。我試圖將填充和邊距應用於行和容器，但沒有運氣。

這是下面的html的fiddle。

<html lang="en"> 
<head> 
    <title></title> 
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet" /> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script> 
    <script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
     }); 
    </script> 
</head> 
<body> 
    <div class="container-fluid"> 
     <div class="row-fluid"> 
      <div class="span12"> 
       <ul id="top-nav" class="nav"> 
        <li data-current-nav="Home"><a href="/Home">Home</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 

    <div class="container-fluid"> 
     <div class="row-fluid"> 
      <div class="span12"> 
       bottom content 
      </div> 
     </div> 
    </div> 
</body> 
</html>

來源

2013-01-08 Ray Cheng

嘗試取出margin-bottom上ul#top-nav：

#top-nav { 
    margin-bottom: 0 !important; 
}

查看更新的jsfiddle的示範>http://jsfiddle.net/6pbPd/1/

來源

2013-01-08 17:48:01 BenM

您應該刪除的ul.nav（20像素）的下邊距和規則適用於容器的min-heightdiv（30px）：

.row-fluid [class*="span"] { 
    min-height: 20px; 
} 

#top-nav { 
    margin-bottom: 0; 
}

演示：http://jsfiddle.net/6pbPd/4/

來源

2013-01-08 17:53:19

爲什麼20？和**爲什麼**'！重要的？不要被jsfiddle結構愚弄：[http://jsfiddle.net/Sherbrow/6pbPd/3/](http://jsfiddle.net/Sherbrow/6pbPd/3/）。無論如何，我認爲很好的答案。 – Sherbrow

適用於排液的樣式對其他地方有一定的副作用，但底邊的效果很好。 –

完全被jsFiddle結構愚弄O_o謝謝@Sherbrow，你能詳細說明一下嗎？我非常感興趣...... –

如何減少Twitter Bootstrap中兩行/容器之間的空白？

回答

相關問題