Question

<!-- Navbar start -->
    <nav class="navbar navbar-default" role="navigation">
      <div class="container-fluid">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#a-navbar-collapse" aria-expanded="false">
                <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
          </a>
        </div>


       <div class="navbar-collapse collapse"  id="a-navbar-collapse">  
           <ul class="nav navbar-nav">
                     <li><a href="#">Link 1</a></li>
                     <li><a href="#">Link 2</a></li> 
                     <li><a href="#">Link 3</a></li>
                     <li><a href="#">Link 4</a></li> 
                     <li><a href="#">Link 5</a></li> 
           </ul>


              <ul class="nav navbar-nav navbar-right">
                 <li><a href="#">Link 6</a></li>
                 <li><a href="#">Link 7</a></li>
              </ul>
        </div> 
       </div>
    </nav>
    <!-- Navbar End -->

这是我的HTML代码，因为这将是导航栏 - 我想保持我的品牌在左角 - 现在很好链接即链接1到链接5对齐导航栏的中心链接6和右侧的Link 7 - 现在很好

帮助我将链接1与链接5对齐到导航栏的中间，这样在折叠时间应该删除中心对齐，并且所有折叠的链接都应该在左侧

第一篇文章！抱歉英文不好

Answer 1

只需使用下面提到的css即可实现。将class=navbar-center添加到包含需要中间对齐的链接的<ul>

工作示例

＆＃13;

@media (min-width: 768px) {
  .navbar-nav.navbar-center {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
  }
}

＆＃13;

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default" role="navigation">
      <div class="container-fluid">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#a-navbar-collapse" aria-expanded="false">
                <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
          </a>
        </div>


       <div class="navbar-collapse collapse"  id="a-navbar-collapse">  
           <ul class="nav navbar-nav navbar-center">
                     <li><a href="#">Link 1</a></li>
                     <li><a href="#">Link 2</a></li> 
                     <li><a href="#">Link 3</a></li>
                     <li><a href="#">Link 4</a></li> 
                     <li><a href="#">Link 5</a></li> 
           </ul>


              <ul class="nav navbar-nav navbar-right">
                 <li><a href="#">Link 6</a></li>
                 <li><a href="#">Link 7</a></li>
              </ul>
        </div> 
       </div>
    </nav>

＆＃13;

Bootstrap导航栏中心对齐

1 个答案: