Question

我正在使用bootstrap，我想创建一个由3部分组成的粘贴顶部导航：

左侧部分 - 带有徽标和字形的列表，左侧浮动，静态内容（3个列表项）
中间部分 - 列表，动态列表（渲染视图），N个项目
右侧部分 - 带有徽标和字形的列表，右侧浮动，静态内容（3个列表项）

我正在使用bootstrap中的navbar，但我无法弄清楚如何将其中间部分居中。

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-items" 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="navbar-brand" href="/"><img src="/img/logo.png"></a>
      </div>

      <div id="navbar-global-items" class="navbar-collapse collapse">

        <!-- LEFT MENU -->
        <ul class="nav navbar-nav navbar-left global-nav-left">
            <li><a href="#">1</a></li>  
            <li><a href="#">2</a></li>
        </ul>

        <!-- RIGHT MENU -->
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
        </ul>

        <!-- NEEDS TO BE CENTERED (*in the remaining space between left and right div*) -->
        <ul class="nav navbar-nav">
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
        </ul>

      </div><!--/.nav-collapse -->
    </div>
  </nav>

你能帮忙吗？

Answer 1

尝试使用此代码

.navbar-nav {
    width: 100%;
    text-align: center;
    > li {
      float: none;
      display: inline-block;
    }
  }

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <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="navbar-brand" href="#">Brand Logo</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="pull-left"><a href="#">Example</a></li>
        <li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li class="social pull-right"><a href="#">1</a></li>
        <li class="social pull-right"><a href="#">2</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Bootstrap：创建类似youtube的顶部导航

1 个答案: