如何使用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

不知道爲什麼你有這個問題，你有沒有改變在引導CSS什麼？

爲了快速解決問題，您可以做一些css，在標頭標記中添加一個「刪除空間」類。

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

然後把這個CSS應用到它。

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