如何减少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中两行/容器之间的空白？

回答

相关问题