需要中心徽標，頂部固定導航引導

Question

我需要帶Bootstrap固定頂部導航的居中徽標。意味着品牌應該成爲導航的中心。

My Sample Fiddle

.LandPageNavLinks { 
 
    list-style-type:none; 
 
    margin:0; 
 
    padding:0; 
 
} 
 
.LandPageNavLinks > li { 
 
    float:left; 
 
    padding:15px; 
 
    margin-right:20px; 
 
} 
 
.LandPageNavLinks > li > a{ 
 
    color:blue; 
 
} 
 
.LandPageNavLinks > li > a:hover { 
 
    text-decoration:none; 
 
} 
 
.navbar { 
 
    background:lightgray; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<div class="navbar navbar-fixed-top"> 
 
    <div class="navbar-header pull-left"> 
 
     <a class="navbar-brand CenterdLogo" href="#">Brand</a> 
 
    </div> 
 
    <div class="navbar-header pull-right"> 
 
     <ul class="LandPageNavLinks"> 
 
      <li> 
 
       <a href="#">Sign Up</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">Log In</a> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
</div>

Answer 1

.LandPageNavLinks { 
 
    list-style-type:none; 
 
    margin:0; 
 
    padding:0; 
 
} 
 
.LandPageNavLinks > li { 
 
    float:left; 
 
    padding:15px; 
 
    margin-right:20px; 
 
} 
 
.LandPageNavLinks > li > a { 
 
    color:blue; 
 

 
} 
 
.LandPageNavLinks > li > a:hover { 
 
    text-decoration:none; 
 
} 
 
.navbar { 
 
    background:lightgray; 
 
} 
 
.CenterdLogo { 
 
    position: absolute; 
 
    transform: translateX(-50%); 
 
    left: 50%; 
 
    float: none; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="navbar navbar-fixed-top"> 
 
    <a class="navbar-brand CenterdLogo" href="#">Brand</a> 
 
    <div class="navbar-header pull-right"> 
 
     <ul class="LandPageNavLinks"> 
 
      <li> 
 
       <a href="#">Sign Up</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">Log In</a> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
</div>

Answer 2

我試圖解決這個問題，它可以幫助你。

.navbar-header.pull-left{ 
    float:none !important; 
    } 
    .navbar-header.pull-right{margin-top: -21px;} 
    a.navbar-brand.CenterdLogo{float:none;} 

.LandPageNavLinks{ 
 
    list-style-type:none; 
 
    margin:0; 
 
    padding:0; 
 
} 
 
.LandPageNavLinks > li{ 
 
    float:left; 
 
    padding:15px; 
 
    margin-right:20px; 
 
} 
 
.LandPageNavLinks > li > a{ 
 
    color:blue; 
 
    
 
} 
 
.LandPageNavLinks > li > a:hover{ 
 
    text-decoration:none; 
 
} 
 
.navbar{ 
 
    background:lightgray; 
 
} 
 
.navbar-header.pull-left{ 
 
float:none !important; 
 
} 
 
.navbar-header.pull-right{margin-top: -21px;} 
 
a.navbar-brand.CenterdLogo{float:none;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<div class="navbar navbar-fixed-top"> 
 

 
     <div class="navbar-header text-center pull-left"> 
 
      <a class="navbar-brand CenterdLogo" href="#">Brand</a> 
 
     </div> 
 
     <div class="navbar-header pull-right"> 
 
      <ul class="LandPageNavLinks"> 
 
       <li> 
 
        <a href="#">Sign Up</a> 
 
       </li> 
 
       <li> 
 
        <a href="#">Log In</a> 
 
       </li> 
 
      </ul> 
 
      
 
     </div> 
 
       
 
    </div>

Answer 3

這是它替代的解決方案。

.LandPageNavLinks { 
 
    list-style-type:none; 
 
    margin:0; 
 
    padding:0; 
 
} 
 
.LandPageNavLinks > li { 
 
    float:left; 
 
    padding:15px; 
 
    margin-right:20px; 
 
} 
 
.LandPageNavLinks > li > a{ 
 
    color:blue; 
 
} 
 
.LandPageNavLinks > li > a:hover { 
 
    text-decoration:none; 
 
} 
 
.navbar { 
 
    background:lightgray; 
 
    position:relative; 
 
} 
 
.navbar-brand { 
 
    position: absolute; 
 
    left: 50%; 
 
    margin-left: -50px !important; /* 50% of your logo width */ 
 
    display: block; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<div class="navbar navbar-fixed-top"> 
 
    <div class="navbar-header pull-left"> 
 
     <a class="navbar-brand CenterdLogo" href="#">Brand</a> 
 
    </div> 
 
    <div class="navbar-header pull-right"> 
 
     <ul class="LandPageNavLinks"> 
 
      <li> 
 
       <a href="#">Sign Up</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">Log In</a> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
</div>