Question

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

广泛展示：
和移动视图：＆gt;

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>

Answer 1

快速修复

试试这个

检查演示 here

请记住：margin-top值将超过navbar的高度

CSS：

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

Answer 2

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

下

CSS：

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

Answer 3

而不是使用段落标签，或许尝试使用BS和CD中常见的行和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>

Answer 4

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

菜单在移动视图中占用空间

4 个答案: