首页 > 关于bootstrap会在手机与电脑浏览器中出现定位偏差。

关于bootstrap会在手机与电脑浏览器中出现定位偏差。

使用的是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>&copy; @DateTime.Now.Year - 我的 ASP.NET 应用程序</p>
    </footer>
</div>
【热门文章】
【热门文章】