Question

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

我没有看到导致导航栏底部与我想要身体内容的起点之间存在差距的原因。

导航栏类中必须存在某种margin-bottom或类似内容。如果我删除了我的导航栏容器，那么正文内容就会出现在我的标题下方。

任何人都知道如何摆脱这个边缘或填充它的内容？

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

默认情况下，非固定导航栏的范围为20px margin-bottom，如下所示。

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

你应该能够像这样覆盖：

.navbar {
  margin-bottom: 0; 
}

Bootstrap 3.3.5中导航栏下的神秘间距

1 个答案: