javascript - 关于bootstrap会在手机与电脑浏览器中出现定位偏差。-PHP中文网问答

使用的是bootstrap v3.0.0和v3.3.5

bootstrap响应式的导航栏会在一定宽度下收缩成按钮，但是该按钮的定位似乎在电脑端和手机端会有不同，
电脑上会根据屏幕来定位（如图1）

而手机模式下似乎是根据<body>的宽度来定位（如图2）

不清楚问题产生的原因和解决方法——我现在想在手机端上也按屏幕来定位。

重现问题时使用的是ASP.NET MVC默认模板【不过这点无关紧要】，
导航栏部分的代码如下，没有修改bootstrap中的任何东西：

<p class="navbar navbar-inverse navbar-fixed-top">
    <p class="container">
        <p 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" })
        </p>
        <p 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")
        </p>
    </p>
</p>
<p class="container body-content">
    @RenderBody()
    <hr />
    <footer>
        <p>&copy; @DateTime.Now.Year - 我的 ASP.NET 应用程序</p>
    </footer>
</p>