菜单在移动视图中占据空间答案

【问题标题】：Menu eats space in mobile view菜单在移动视图中占据空间
【发布时间】：2017-03-10 13:36:31
【问题描述】：

我使用 Bootsstrap v3.1.1 来构建响应式 UI。它工作正常，除了菜单“吃掉”移动视图中的一些空间。从以下图片可以看出。

宽屏显示：
和移动视图：
>

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>

【问题讨论】：

标签： html css asp.net-mvc twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

快速修复

试试这个

查看演示here

记住：margin-top 的值会大于导航栏的高度

CSS：

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

【讨论】：

在PC视图中它变得离顶部很远
@StepUp 使用media-query

【解决方案2】：

你的导航栏固定在顶部，你的 .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 }
}

【讨论】：

【解决方案3】：

也许可以尝试使用 BS 中常见的 row 和 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>

【讨论】：

它不起作用。在移动视图中看不到该行。
也使用 mt-50 类，给它留出余量。另请参阅@Med 答案。

【解决方案4】：

尝试添加 CSS，因为您的文本隐藏在菜单下

CSS：

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

【讨论】：

它不起作用。在移动视图中看不到该行。