问题描述:

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/

相关阅读:
Top