Меню ест пространство на мобильном телефоне

Я использую Bootsstrap v3.1.1 для создания адаптивного пользовательского интерфейса. Он работает нормально, за исключением того, что меню «ест» некоторое пространство в мобильном режиме. Это видно из следующих изображений.

На широком дисплее:
и мобильный зрения:
>
Меню ест пространство на мобильном телефоне

HTML:

<body> 
    <div class="navbar navbar-default navbar-fixed-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>     
      </div> 
      <div class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav">      
        <li>@Html.ActionLink("Menu1", "Menu1", "Home")</li> 
        <li>@Html.ActionLink("Menu2", "Menu1", "Home")</li> 
        <li>@Html.ActionLink("Menu3", "Menu1", "Home")</li> 
        <li>@Html.ActionLink("Menu4", "Menu1", "Home")</li> 
        <li>@Html.ActionLink("Menu5", "Menu1", "Home")</li> 
        <li>@Html.ActionLink("Menu6", "Menu1", "Home")</li>  

       </ul> 
       @Html.Partial("_LoginPartial")     
      </div> 
     </div> 
    </div> 
    <div class="container body-content">   
     <p>1. This text can be seen on personal computer, but not in mobile</p> 
     <p>2. This text can be seen on personal computer, but not in mobile</p> 
     <p>3. This text can be seen on personal computer, but not in mobile</p> 

     @RenderBody() 
    </div> 
    <footer style="display: table; text-align:center;margin-left:auto;margin-right:auto"> 

     <p>&copy; @DateTime.Now.Year</p> 
    </footer> 

    @Scripts.Render("~/bundles/jquery") 
    @Scripts.Render("~/bundles/bootstrap") 
</body>

источник

2016-10-27 StepUp

Quick Fix

Попробуйте

Check Demo here

Помните: Верхнее поле значения будет больше, чем высота навигационной панели

CSS:

@media (max-width: 768px) { 
    .body-content { 
     margin-top: 70px; 
    } 
}

источник

2016-10-27 18:59:53

Это очень далеко от вершины на ПК. – StepUp

@StepUp Использовать 'media-query' –

Try Добавление CSS к нему как текст скрыт под меню

CSS:

@media only screen and (max-width: 480px) { 
.body-content{ 
margin-top:5px; 
} 
}

источник

2016-10-27 18:43:20 Raul

не работает. Строка не видна в мобильном режиме. – StepUp

вместо того, чтобы использовать теги абзаца, возможно, попробуйте использовать строку и COL-MD-12, как это принято в БС.

<row> 
    <div class='col-md-12'> this text is visible</div> 
</row> 
<row> 
    <div class='col-md-12'> this text is visible</div> 
</row> 
<row> 
    <div class='col-md-12'> this text is visible</div> 
</row>

источник

2016-10-27 18:46:19 Griehle

не работает. Строка не видна в мобильном режиме. – StepUp

использовать класс mt-50, а также дать ему запас. См. Также ответ @Med. – Griehle

Ваш Navbar закреплен на верхней и ваш класс .navbar есть min-height: 50px; так добавить новый DIV так:

<html> 
<body> 
    <nav>...</nav> 
    <div id="main"> 
    <div class="container"> 
    <p> your content here </p> 
    </div> 
    </div> 
</body> 
</html>

CSS:

#main { 
padding-top: 70px; 
}

Если вы хотите отобразить элементы только в (средние/большие устройства) используют этот код:

@media (max-width: 768px) { 
    p { display: none } 
}

источник

2016-10-27 18:56:46 Med

Меню ест пространство на мобильном телефоне

ответ

Смежные вопросы