Tajemnicza biała spacja pomiędzy Bootstrap2 Navbar a rzędem pod

Question

Używam paska nawigacji Bootstrap i Bootsrap do wyświetlania paska nawigacyjnego z obrazem bezpośrednio pod paskiem nawigacji. Jednak z jakiegoś powodu istnieje odstęp między tym paskiem nawigacyjnym a obrazem. Kiedy używam firebuga do sprawdzenia lokalizacji białych znaków, wygląda na to, że pasek nawigacyjny jest wyrównany do góry w obrębie zawierającego. Próbowałem to naprawić, używając CSS do dolnego wyrównania paska nawigacyjnego, bez rezultatu.

Jak mogę wyeliminować te białe znaki?

Dzięki!

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

Oto moja rozpaczliwa próba wyeliminowania tego problemu za pomocą 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

Możesz zastąpić margin-bottom: 20px z navbar:

.navbar { 
    margin-bottom: 0; 
} 

Coś takiego: http://jsfiddle.net/q4M2G/ (the !important jest tu po prostu zastąpić styl wersji CDN z bootstrap używam w jsfiddle ale nie powinieneś go używać, jeśli twój styl poprawnie zastępuje style ładowania początkowego)

Answer 2

Dlaczego można umieścić klasy: span12 offset3?

Bootstrap ma domyślnie 12 kolumn. więc jeśli go nie zmieniłeś, spróbuj umieścić:

span9 offset3 lub po prostu span12.