CODEWITHSUNDEEP
csstwitter-bootstrap-3
Ironcache
Ironcache

Reputation: 1759

Bootstrap Navbar Unexpected Bottom Spacing

This has been asked several times. I've checked several different answers, and found no resolution in any of them. I've set margin-bottom: 0 for the navbar. I'm not using the fixed-top navbar. My HTML tags are all closed. None of the resolution in the questions I've seen have helped.

The MCVE for this is super simple. I feel like the answer must be as well, but this is my first experience with bootstrap, and I don't see it. Here's a bootply. For completeness, I'll copy the material here.

HTML

<!-- Navigation Bar -->
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <ul class="nav navbar-nav">
      <li onclick="navigateToSettings()" id="settingsHeaderItem"><a href="#">Settings</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li> 
      <li><a href="#">Page 3</a></li> 
    </ul>
  </div>
</nav>

<!-- Content Pane -->
<div id="contentPane" class="contentPane">
  <h1>TEST</h1>
</div>

CSS

.navbar {
  margin-bottom: 0;
}

.contentPane {
  background-color: black;
}

RESULT

Spacing

Upvotes: 0

Views: 79

Answers (3)

DUONG QUAN
DUONG QUAN

Reputation: 1

You can try It :

<nav class="navbar navbar-default" style="margin-bottom:0px;">

Upvotes: 0

z0mBi3
z0mBi3

Reputation: 1544

Set display: inline-block and width: 100% to .contentPane css class. This will make the container to take the height of the child.

http://www.bootply.com/nsERfrADNA

Upvotes: 1

Jeremy John
Jeremy John

Reputation: 1715

Your h1 and nav has margins... and also use a class so it does not affect every other h1 and nav tags.

h1.someclass {
    margin-top: 0px;
}
nav.someclass {
    margin-bottom:0px;
}

http://www.bootply.com/eVIT3PIaJb

Upvotes: 2

Related Questions