gpt4 book ai didi

html - 菜单在移动 View 中占用空间

转载 作者:太空宇宙 更新时间:2023-11-04 09:36:34 25 4
gpt4 key购买 nike

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

广泛显示: enter image description here
和移动 View :
enter image description here >

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>

最佳答案

快速修复

试试这个

检查演示 here

Remember: margin-top value will be more than the height of navbar

CSS:

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

关于html - 菜单在移动 View 中占用空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40291879/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com