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/