twitter-bootstrap - Bootstrap 3.3.5 导航栏下的神秘间距

Question

我才刚刚开始真正动手使用 Bootstrap 来模仿我现有的网站。除了我的导航栏和正文内容之间有大约 15 像素的差距之外，我几乎在那里。我解释代码的方式是我有一个容器类，它包含我的导航栏，正下方是正文内容。我创建了一个新的“container-content”，这样我就可以在它周围放一个边框并给它一个对比鲜明的背景颜色。我还包含了“body-content”，但这只是放置左/右填充的内置类。

我没有看到什么会导致导航栏底部和我想要我的正文内容的开始位置之间存在间隙。

导航栏类中必须有某种边距底部或类似的东西。如果我删除我的导航栏容器，那么正文内容将位于我的标题正下方。

任何人都知道我怎样才能去掉它放入的边距或填充？

我分享的_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>

我的索引.cshtml

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

    </div>

我的网站.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

默认情况下，非固定导航栏有 20 像素的 margin-bottom，来自下面显示的类。

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

你应该能够像这样覆盖它:

.navbar {
  margin-bottom: 0; 
}