定位折叠Bootstrap 3导航栏的内容

Question

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

我尝试了很多不同的组合但却无法正确定位。

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

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

<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 -->

Answer 1

只需将班级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>