Khoảng trống bí ẩn ở giữa thanh điều hướng Bootstrap2 và hàng bên dưới

Question

Tôi đang sử dụng thanh điều hướng của Bootstrap và thanh công cụ của Bootsrap để hiển thị thanh điều hướng có hình ảnh ngay bên dưới thanh điều hướng. Tuy nhiên, vì một số lý do có khoảng trắng giữa thanh điều hướng này và hình ảnh. Khi tôi sử dụng firebug để điều tra vị trí của khoảng trắng, có vẻ như thanh điều hướng được căn chỉnh trên cùng bên trong vùng chứa của nó. Tôi đã cố gắng khắc phục điều này bằng cách sử dụng CSS để căn chỉnh thanh điều hướng ở dưới cùng, không có kết quả.

Làm cách nào để loại bỏ khoảng trống này?

Cảm ơn!

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

Đây là nỗ lực tuyệt vọng của tôi lúc sửa chữa vấn đề này bằng 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

Bạn có thể muốn ghi đè lên margin-bottom: 20px từ navbar:

.navbar { 
    margin-bottom: 0; 
} 

Something như thế: http://jsfiddle.net/q4M2G/ (các !important là đây chỉ để ghi đè lên phong cách của phiên bản CDN của bootstrap Tôi đang sử dụng trong jsfiddle nhưng bạn không cần phải sử dụng nó nếu kiểu của bạn ghi đè chính xác kiểu khởi động)

Answer 2

Tại sao bạn đặt lớp: span12 offset3?

Bootstrap có 12 cột mặc định. vì vậy nếu bạn không thay đổi, hãy thử đặt:

span9 offset3 hoặc chỉ span12.