Css 引导导航栏中的元素定位

我已经花了几个小时试图在一个固定的引导导航栏中正确地定位几个元素，但是我没有得到我想要的东西。这就是我到目前为止所做的：

      <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
          <div class="navbar-header pull-left">
                <a class="navbar-brand" href="http://www.aprentiko.com">brand</a>
                    <p class="navbar-text">title of the page</p>
          </div>

          <div class="collapse navbar-collapse navbar-right">
            <ul class="nav navbar-nav navbar-right">
            <li><a href="#tocWindow" data-toggle="modal" ><span class="glyphicon glyphicon-th-list"></span></a></li>
                <li><a href="#configWindow" data-toggle="modal"><span class="glyphicon glyphicon-cog"></span></a></li>
                <li><a href="#helpWindow" data-toggle="modal" ><span class="glyphicon glyphicon-info-sign"></span></a></li>
            </ul>
          </div>
          <div class="navbar-header pull-right">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <ul class="nav navbar-nav">
              <li><a href="#" id="audioControl"><span id="audioInPause" class="glyphicon glyphicon-play"></span></a></li>
            </ul>
          </div>
        </div>
      </nav>

我遇到的问题如下：

我想把页面元素的标题定位在屏幕中间，但是它总是停留在左边，紧靠着品牌。 audioControl项目应独立于右侧的其他图标，即当视口变得太小时，它不应折叠。我实现了不折叠部分，但是当图标折叠时，我得到a播放按钮总是在第二行，b点击折叠按钮激活播放按钮，而不是打开菜单选择一个折叠的项目。

---

我在

创建了一个jsfiddle，我可以快速回答第一个问题，但我不知道它是否适用于collapse，您可以随意使用

我同意上面关于马特的评论。作为一个转折点，使用col lg xx col md xx等对导航进行分区，然后使用文本中心

作为一个例子，给你一个想法

<div class="navbar-header pull-left col-lg-10 col-md-9">
   <a class="navbar-brand" href="http://www.aprentiko.com">brand
      <p class="text-center navbar-text">title of the page</p>
   </a>
</div>
<div class="collapse navbar-collapse navbar-right col-lg-2 col-md-3">

---

老实说，使用引导navbar执行此操作可能不是一个好主意，它很容易成为框架中最不灵活的组件。@MattD，您建议使用其他方法吗？

in fact, u should take a look at the bootstap.css to have an idea of the classes used to code elements. 
the ms-md-auto move ur elements to the right: 

.ms-md-auto {
    margin-left: auto !important;
  }