Spazio bianco misterioso tra Bootstrap2 Navbar e riga sotto

Question

Utilizzo la barra di avvio di Bootstrap e la griglia di Bootsrap per visualizzare una barra di navigazione con un'immagine immediatamente sotto la barra di navigazione. Tuttavia, per qualche ragione c'è spazio bianco tra questo Navbar e l'immagine. Quando uso firebug per investigare la posizione dello spazio bianco, sembra che la barra di navigazione sia allineata in alto all'interno del suo contenuto. Ho provato a risolvere questo problema utilizzando CSS per allineare in basso la barra di navigazione, senza alcun risultato.

Come posso eliminare questo spazio?

Grazie!

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

Ecco il mio disperato tentativo di risoluzione di questo problema usando i 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

Si consiglia di ignorare il margin-bottom: 20px da navbar:

.navbar { 
    margin-bottom: 0; 
} 

Qualcosa del genere: http://jsfiddle.net/q4M2G/ (il !important è qui solo per sostituire lo stile della versione CDN di bootstrap che sto utilizzando nel jsfiddle ma non dovrebbe essere necessario usarlo se il tuo stile sovrascrive correttamente gli stili di bootstrap)

Answer 2

Perché mettere classi: span12 offset3?

Bootstrap ha 12 colonne predefinite. quindi se non lo hai cambiato prova a mettere:

span9 offset3 o solo span12.