Загадочные пробелы между Bootstrap2 Navbar и строкой внизу

Question

Я использую сетку Navbar и Boottrap для Bootstrap, чтобы отобразить Navbar с изображением сразу под Navbar. Однако по какой-то причине между этим Navbar и изображением есть пробелы. Когда я использую firebug для исследования местоположения пробелов, похоже, что Navbar выровнен по верхнему краю внутри его содержимого. Я попытался исправить это, используя CSS, чтобы выровнять навигационную панель, но безрезультатно.

Как я могу устранить это пробелы?

Спасибо!

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

Вот моя отчаянная попытка устранить эту проблему с помощью 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

Вы можете переопределить margin-bottom: 20px из navbar:

.navbar { 
    margin-bottom: 0; 
} 

Что-то вроде этого: http://jsfiddle.net/q4M2G/ (!important здесь просто переопределить стиль версии CDN бутстраповского я использую в jsfiddle но вам не нужно использовать его, если ваш стиль правильно переопределяет стили бутстрапа)

Answer 2

Почему вы положили классы: span12 offset3?

Bootstrap имеет 12 столбцов по умолчанию. поэтому, если вы его не изменили, попробуйте поставить:

span9 offset3 или просто span12.