如何使用jumbotron和navbar创建布局？

Question

我正在尝试使用jumbotron和navbar创建布局，但我无法做到。我希望jumbotron位于顶部，而navbar位于其中。在我创建之后，我不知道它为什么在顶部和navbar之间有空格。

我该如何解决这个问题？

试图

<!-- Header.cshtml to use as a Partial to include on main layout -->

<header class="jumbotron bg-red">
    <h1>My first layout</h1>
    <h3>Trying to create a layout using jumbotron and navbar</h3>
</header><!--jumbotron-->

<div class="navbar navbar-inverse navbar-static-top">
    <div class="container">
        <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>
            <a href="@Url.Action("Index", "Home")" class="navbar-brand"><img src="~/Imagens/logo.png" width="32" height="32" title="Red Cherry" /></a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                <li>@Html.ActionLink("About", "About", "Home")</li>
                <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
            </ul>
            @Html.Partial("_LoginPartial")
        </div>
    </div>
</div><!--nav bar-->

Answer 1

不确定为什么会出现此问题，您是否更改过bootstrap css中的任何内容？

要快速修复，您可以执行一些CSS，在标题标记中添加“删除空格”类。

<header class="jumbotron bg-red remove-space">

然后将此css应用于它。

.remove-space{
    margin: -50px 0 0 0;
 }