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项目应该独立于右侧的其他图标（即，当视口变得太小时它不会崩溃。我实现了“不折叠”部分，但是当图标崩溃时我得到了a）游戏按钮总是进入第二行，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">

Answer 2

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

<ul class="navbar-nav ms-md-auto mb-2 mb-lg-0" >

引导导航栏

2 个答案: