使用的是bootstrap v3.0.0和v3.3.5
bootstrap响应式的导航栏会在一定宽度下收缩成按钮,但是该按钮的定位似乎在电脑端和手机端会有不同,
电脑上会根据屏幕来定位(如图1)
而手机模式下似乎是根据<body>的宽度来定位(如图2)
不清楚问题产生的原因和解决方法——我现在想在手机端上也按屏幕来定位。
重现问题时使用的是ASP.NET MVC默认模板【不过这点无关紧要】,
导航栏部分的代码如下,没有修改bootstrap中的任何东西:
<div class="navbar navbar-inverse 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>
@Html.ActionLink("应用程序名称", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("主页", "Index", "Home")</li>
<li>@Html.ActionLink("关于", "About", "Home")</li>
<li>@Html.ActionLink("联系方式", "Contact", "Home")</li>
</ul>
@Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - 我的 ASP.NET 应用程序</p>
</footer>
</div>