Problème avec le défilement dans des périphériques plus petits

Je développe un site Web en utilisant ASP.NET MVC. Bootstrap est utilisé pour l'interface utilisateur. J'ai le HTML ci-dessous dans ma vue de mise en page.Problème avec le défilement dans des périphériques plus petits

<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>

Lorsque je tente de voir la page dans les appareils plus petits (iPhone5/6) etc, je vois que le contenu de ma page de contenu en dessous du bas de page se développe collant et donc ne pas s'afficher. Mais, l'affichage est bien dans les gros appareils. Comment puis-je ajouter une barre de défilement ou rendre le contenu défilant lorsqu'il est affiché sur des appareils plus petits?

Source

2017-09-06 Thomas

Les barres de navigation fixes chevauchent le contenu principal par défaut. Pour éviter cela, vous devez ajouter des marges à votre bloc de contenu. Selon bootstrap 3, il ressemblera à ceci:

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

Et puis dans vos styles fichier:

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

Source

2017-09-06 17:48:31

Problème avec le défilement dans des périphériques plus petits

Répondre

Questions connexes