html - Bootstrap 响应式导航栏折叠错位

Question

我使用 twitter bootstrap v3 在右侧创建了一个带有简单联系按钮的导航栏。

但是，当屏幕尺寸 < 768px 时，它会落在导航栏之外。

这是有问题的部分。

<div class="pull-right">      
    <ul class="nav">
     <a href="#"><li id="myContactButton" class="nav-text alternate">Contact Us</li></a>
    </ul>
   </div>

http://jsfiddle.net/x9NBC/

我已经查看了 css 中的 @media 查询，但我无法弄清楚是什么让它像那样下降。

如何让它与导航保持一致？

Answer 1

添加这些部分

我已经为一些元素添加了 pull-left 类，如下所述

 <div class="navbar-header pull-left">

向左拉按钮

 <button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target=".navbar-collapse">

也为 anchor 标签添加左拉

<a href="index.php" class="pull-left">

这是演示 http://jsfiddle.net/x9NBC/6/