崩溃Bootstrap 3导航栏的位置内容

我试图创建一个部分崩溃的导航栏。在导航栏上对齐元素时，图标位置错误。我想让图标位于右侧，就在折叠按钮的前面，如下图所示。崩溃Bootstrap 3导航栏的位置内容

desired image 。

我已经尝试了很多不同的组合，但一直无法正确定位。

如何将图标移动到导航栏的另一侧？

下面是我的代码，并与图标不需要输出左侧

undesired output 。

<nav class="navbar navbar-default"> 
<div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
      <a class="btn navbar-btn navbar-right btn-social-icon btn-xs btn-twitter"> 
       <i class="fa fa-twitter"></i> 
      </a> 
     <a class="navbar-brand" href="#">{{title}}</a> 
    </div> 
    <div id="navbar" class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav pull-right"> 
      <li><a href="#">Item 1</a></li> 
      <li><a href="#">Item 2</a></li> 
      <li><a href="#">Item 3</a></li> 
      <li><a href="#">Item 4</a></li> 
     </ul> 
    </div><!--/.nav-collapse --> 
</div><!--/.container-fluid -->

来源

2015-07-04 Calyce

请张贴正确的代码。您发布的HTML不适用于第一张图片。 – Wazaaaap

第一张照片是所需的结果。它被编辑。第二张照片是提供的代码的结果。 – Calyce

类pull-right只需添加到包含图标的按钮。

<a class="btn navbar-btn navbar-right btn-social-icon btn-xs btn-twitter pull-right"> 
    <i class="fa fa-twitter"></i> 
</a>

来源

2015-07-04 13:50:34 Wazaaaap

刚刚测试过它，它的工作原理。非常感谢。 – Calyce

崩溃Bootstrap 3导航栏的位置内容

回答

相关问题