Mysteriöse Leerzeichen zwischen Bootstrap2 Navbar und Zeile darunter

Question

Ich benutze Bootstrap Navbar und Bootsrap Gitter, um eine Navbar mit einem Bild direkt unter der Navbar anzuzeigen. Aus irgendeinem Grund gibt es jedoch Leerzeichen zwischen dieser Navbar und dem Bild. Wenn ich mit dem Firebug die Position des Whitespace untersuche, sieht es so aus, als ob die Navbar innerhalb ihres Containers nach oben ausgerichtet ist. Ich habe versucht, dies zu beheben, indem Sie CSS verwenden, um die Navigationsleiste unten auszurichten, ohne Erfolg.

Wie kann ich diesen Leerraum eliminieren?

Danke!

<!-- Top Navigation Bar --> 
<div class="row" id="rowTopLinkNavBar"> 
    <div class="span6 offset3" id="divTopLinkNavBar"> 
     <div class="navbar" id="topLinkNavBar"> 
      <div class="navbar-inner" style="font-size: 16px;"> 
       <ul class="nav"> 
        <li class="active"><a href="#">Home</a></li> 
        <li class="divider"><a href="#">PROJECTS</a></li> 
        <li class="divider"><a href="#">ABOUT US</a></li> 
        <li class="divider"><a href="#">THE TEAM</a></li> 
        <li class="divider"><a href="#">EVENTS</a></li> 
        <li class="divider"><a href="#">MEETINGS</a></li> 
        <li><a href="#">RESOURCES</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</div> 

<!--Background Image--> 
<div class="row" id="rowBackgroundImg"> 
    <div class="span6 offset3" id="backgroundImg"> 
    <!-- background image is set in CSS --> 
    </div> 
</div> 

Hier ist mein verzweifelter Versuch, dieses Problem Festsetzung CSS:

#backgroundImg 
{ 
    color: #ff0000; 
    background-color: #000000; 
    /*width: 709px; 
    height: 553px;*/ 
    background: url('../images/someImage.jpg') no-repeat; 
    background-size: 100%; 
    height: 700px; 
    border-radius: 0px; 
    background-position: center; 
    vertical-align: top; 
    background-position: top; 
} 



#divTopLinkNavBar 
{ 
    vertical-align: bottom; 
} 

#topLinkNavBar 
{ 
    padding-bottom: 0px; 
} 
#rowBackgroundImg 
{ 
    padding-top: 0px; 
} 

.navbar 
{ 
    vertical-align: bottom; 
} 

Answer 1

Sie können die margin-bottom: 20px von navbar außer Kraft zu setzen:

.navbar { 
    margin-bottom: 0; 
} 

So etwas: http://jsfiddle.net/q4M2G/ (die !important ist hier nur außer Kraft setzt den Stil der CDN-Version von Bootstrap im jsfiddle Ich verwende aber Sie sollten es nicht verwenden müssen, wenn Ihr Stil Bootstrap-Stile korrekt überschreibt)

Answer 2

Warum Sie Klassen setzen: span12 offset3?

Bootstrap hat standardmäßig 12 Spalten. Also, wenn Sie es nicht geändert haben, versuchen Sie es zu setzen:

span9 offset3 oder nur span12.