Bootstrap 响应式导航栏折叠错位

【问题标题】：Bootstrap responsive navbar collapse misalignmentBootstrap 响应式导航栏折叠错位
【发布时间】：2013-10-21 18:28:50
【问题描述】：

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

但是，当屏幕尺寸

这是有问题的部分。

<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 查询，但我不知道是哪个使它像那样下拉。

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

【问题讨论】：

标签： html css twitter-bootstrap responsive-design twitter-bootstrap-3

【解决方案1】：

添加这些部分

我已经为一些元素添加了pull-left类，下面会提到

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

向左拉按钮

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

也为锚标签添加拉左

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

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

【讨论】：