bootstrap 4中左右导航之间的品牌

时间:2017-05-04 14:02:07

标签: html bootstrap-4

 <nav class="navbar-toggleable-sm" role="navigation">
      <div class="container justify-content-center">


          <div class="navbar-brand navbar-brand-centered">Brand</div>




          <ul class=" navbar-nav float-left">
            <li class = "nav-item"><a class=" nav-link" href="#">Link</a></li>
            <li class = "nav-item"><a  class=" nav-link" href="#">Link</a></li>
            <li class = "nav-item"><a class=" nav-link"  href="#">Link</a></li>
          </ul>
          <ul class=" navbar-nav float-right">
            <li class = "nav-item"><a class=" nav-link" href="#">Link</a></li>
            <li class = "nav-item"><a class=" nav-link" href="#">Link</a></li>
            <li class = "nav-item"><a class=" nav-link" href="#">Link</a></li>              
          </ul>
        <!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>

我已经开始在这里学习bootsrap 4我希望我的导航就像前三个链接到左侧,其他链接到我的品牌标识右侧,整个容器也被称为中心。

1 个答案:

答案 0 :(得分:-1)

 <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
    <a class="navbar-brand mx-auto" href="#">BRAND</a>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav ml-auto">
             <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
             <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
             <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>