0

ASP.NET MVC를 사용하여 웹 사이트를 개발 중입니다. 부트 스트랩은 UI에 사용됩니다. 레이아웃보기에 아래 HTML이 있습니다. 나는 등 작은 장치에서 페이지 (아이폰 5/6)를 참조 할 때작은 장치에서 스크롤하는 문제

<body> 
    @*Header*@ 
    <nav class="navbar navbar-default navbar-fixed-top"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" href="#">App Name</a> 
      </div> 
      <div id="navbar" class="navbar-collapse collapse navbar-right"> 
       <ul class="nav navbar-nav"> 
        @*<li class="active"><a href="#">Dashboard</a></li>*@ 
        <li><a href="#">Menu1</a></li> 
        <li><a href="#menu2">Menu2</a></li> 
        <li><a href="#menu3">Menu3</a></li> 
       </ul>     
      </div><!--/.nav-collapse --> 
     </div> 
    </nav> 
    <div> 
     @RenderBody() 
    </div> 
    <div class="navbar navbar-default navbar-fixed-bottom"> 
     <div class="container"> 
      <p class="navbar-text pull-left"> 
       © 2017 xxxxxxxxxx    
      </p> 

      <a class="navbar-btn btn-default btn pull-right"> 
       <span class="glyphicon glyphicon-tower"></span>&nbsp;<strong>This is test</strong> 
      </a> 
     </div> 
    </div> 
</body> 

, 내 콘텐츠 페이지의 내용이 끈적 끈적한 바닥 글 아래 성장하고 따라서 표시 가져 오지 것을 알 수있다. 그러나, 더 큰 장치에서는 디스플레이가 양호합니다. 스크롤바를 추가하거나 작은 기기에서 볼 때 콘텐츠를 스크롤 할 수있게하려면 어떻게해야합니까?

답변

0

고정 된 navb는 기본적으로 기본 콘텐츠와 겹칩니다. 이를 방지하려면 콘텐츠 블록에 여백을 추가해야합니다. 이 같이 표시됩니다 3 부트 스트랩에 따르면 : 당신의 스타일에 다음

<div class="page-content"> 
    @RenderBody() 
</div> 

그리고 파일 :

.page-content { 
    maring: 50px 0; 
}