Загадочный интервал под navbar в Bootstrap 3.3.5

Question

Я только начинаю действительно замарать руки с помощью Bootstrap, чтобы имитировать текущий сайт, который у меня есть. Я в значительной степени там, за исключением проблемы с 15px-разрывом между моей навигационной панелью и содержимым тела. То, как я интерпретирую код, - это контейнерный класс, который содержит мой навигатор, и прямо под ним будет содержание тела. Я создал новый «контейнер-контент», чтобы я мог поместить вокруг него границу и дать ей контрастный цвет фона. Я также включил «body-content», но это только встроенный класс, который помещает левое/правое дополнение.

Я не вижу, что может вызвать разрыв между нижней частью навигационной панели и началом того, где я хочу получить содержимое моего тела.

В классе navbar должно быть какое-то дно или что-то подобное. Если я удалю свой контейнер навигатора, содержимое тела появится прямо под моим заголовком.

Кто-нибудь знает, как я могу избавиться от этого поля или заполнить его?

Мой общий _Layout.cshtml

<div class="container"> 
     <div class="navbar navbar-inverse" style="border-radius:0;"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
      </div> 
      <div class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav"> 
        <li>@Html.ActionLink("Home", "Index", "Home")</li> 
        <li>@Html.ActionLink("Contact Us", "About", "Home")</li> 
       </ul> 
      </div> 
     </div> 
     <div class="container-content body-content"> 
      @RenderBody() 
     </div> 
    </div> 

Мои Index.cshtml

<div class="body-content-wrapper"> 
This is where my main body content goes. 

    </div> 

Мои site.css

.body-content { 
    padding-left: 15px; 
    padding-right: 15px; 
} 

.body-content-wrapper { 
    margin-top: 15px; 
    margin-bottom: 25px; 
} 

.container-content { 
    background-color: #f8eed5; 
    border: 1px solid black; 
} 

Answer 1

По умолчанию нефиксированное Navbar имеет 20px из margin-bottom , из класса, показанного ниже.

.navbar { 
    position: relative; 
    min-height: 50px; 
    margin-bottom: 20px; 
    border: 1px solid transparent; 
} 

Вы должны быть в состоянии изменить это так:

.navbar { 
    margin-bottom: 0; 
}