引導導航欄鏈接和導航品牌為中心

Question

我想成為導航結構，導航品牌圖像（徽標）應居中居中，之后導航應居中對齊。 只是品牌徽標和導航欄鏈接應居中，但兩者應使用不同的線條和粘性。 以下面的方式嘗試過但是我無法獲得它。

  
 
  
  
  
 
   
 
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <nav class="navbar navbar-default" role="navigation">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <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">
        <ul class="nav navbar-nav navbar-left">
            <li><a href="#">Left</a></li>
            <li><a href="#about">Left</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#about">Right</a></li>
          <li><a href="#contact">Right</a></li>
        </ul>
      </div>
    </nav>
 
   
 
  

Answer 1

這就是你想要的嗎？

 @media (min-width: 768px) { .navbar-nav.navbar-center, .navbar-header-center { margin-left: 50%; transform: translateX(-50%); } } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header navbar-header-center"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <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="clearfix"></div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-center"> <li><a href="#">Left</a></li> <li><a href="#about">Left</a></li> <li><a href="#about">Right</a></li> <li><a href="#contact">Right</a></li> </ul> </div> </nav> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 

Answer 2

  
 
  
  
  
 
   
 
    
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

        <nav class="navbar navbar-default" role="navigation">
          <div class="navbar-header">
            <a class="navbar-brand" href="#">Brand</a>
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>    
          </div>
          <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-left">
                <li><a href="#">Left</a></li>
                <li><a href="#about">Left</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#about">Right</a></li>
              <li><a href="#contact">Right</a></li>
            </ul>
          </div>
        </nav>

    <style>
    .navbar-header {
    float: none;
    text-align:center;
    }
    .navbar-brand {
display: inline-block;
float: none;
}
.navbar-collapse {
display: inline-block !important;
text-align:center;
width: 100%;
}
.navbar-nav.navbar-left, .navbar-nav.navbar-right {
float:none !important;
display:inline-block;
}
    </style>