2017-01-23 1 views
1

내 프로젝트에서 asp.net MVC 5를 사용합니다. 여기_Layout.cshtml에서보기의 맨 위에 공백이있는 이유는 무엇입니까?

_Layout.cshtml 페이지에서 생성 된 코드 :

<body> 
    <div class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container topNavBtn"> 
      <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> 
       @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" }) 
      </div> 
      <div class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav"> 
        <li>@Html.ActionLink("Home", "Index", "Home", new { area = "" }, null)</li> 
        <li>@Html.ActionLink("API", "Index", "Help", new { area = "" }, null)</li> 
       </ul> 
      </div> 
     </div> 
    </div> 
    <div class="container body-content"> 
     @RenderBody() 
     <hr /> 
     <footer> 
      <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p> 
     </footer> 
    </div> 

    @Scripts.Render("~/bundles/jquery") 
    @Scripts.Render("~/bundles/bootstrap") 
    @RenderSection("scripts", required: false) 
</body> 
</html> 

나는이 사업부에서 코드를 제거 :

<body> 
    <header style="background-color:green">My Header</header> 
    <div class="container body-content"> 
     @RenderBody() 
     <hr /> 
     <footer> 
      <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p> 
     </footer> 
    </div> 

    @Scripts.Render("~/bundles/jquery") 
    @Scripts.Render("~/bundles/bootstrap") 
    @RenderSection("scripts", required: false) 
</body> 

그러나 지역 :

<div class="navbar navbar-inverse navbar-fixed-top"> 

내 자신의 헤더를 만들 보기 페이지 상단에 공간이 있습니다.

enter image description here

위의 공백이있는 이유는 무엇입니까?

+0

헤더 요소에 내용 ("My Header")이 있으므로 높이가 – tmg

+0

입니다. devloper 도구에서 헤더를 검사하고 캡쳐 화면을 첨부 할 수 있습니까? –

답변

0

부트 스트랩에서 고정 된 navbar를 사용하려면 navbar에 충분한 공간을 제공하기 위해 본체에 padding-top을 설정해야합니다. 맨 위의 공간은 navbar가 있어야하는 곳이지만 포함시키지 않은 공간입니다. 네비게이션 바를 원하지 않는다면, 단순히 바디 요소에서 패딩 윗부분을 제거하십시오. 그렇지 않으면 공간을 채우기 위해 탐색 모음을 추가하십시오.

관련 문제