css - Bootstrap 导航栏中的定位元素

Question

我已经花了几个小时试图在固定的 Bootstrap 导航栏中正确定位几个元素，但我没有设法得到我想要的东西。这是我目前所拥有的:

      <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 元素应该独立于右侧的其他图标(即当视口(viewport)变得太小时它不应该折叠。我实现了“不折叠”部分，但是当图标折叠时我得到了一个)播放按钮始终位于第二行，b) 单击折叠按钮会激活播放按钮，而不是打开菜单来选择折叠的元素之一。

我在 https://jsfiddle.net/cwx1wvo7 创建了一个 jsfiddle

Answer 1

我可以快速回答第一个，但我不知道它是否适用于崩溃，你可以玩。

我同意上面关于 MattD 的评论。作为一个转折，使用 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">