css - How to reduce the margin between two rows/containers in Twitter Bootstrap?

问题描述:

I have two rows in two containers, but I can't figure out how to reduce the bottom and top margin/padding to bring the content closer.

The bottom content is way too far and I would like to bring it closer to the first row/container.

I tried to apply padding and margin to the rows and containers with no luck.

Here's a fiddle of the html below.

<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>

网友答案:

Try removing the margin-bottom on ul#top-nav:

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

See the updated jsFiddle for a demonstration > http://jsfiddle.net/6pbPd/1/

网友答案:

You should remove the bottom margin of ul.nav (20px) and the rule applied to the min-height of the container div (30px):

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

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

Demo: http://jsfiddle.net/6pbPd/4/

分享给朋友：

您可能感兴趣的文章：

随机阅读：

动力学知识库

css - How to reduce the margin between two rows/containers in Twitter Bootstrap?