在自舉導航欄中左，右和居中內容

試圖讓自舉導航欄在響應網站的左側，中間和右側有鏈接。在自舉導航欄中左，右和居中內容

這甚至有可能嗎？也許navbar-justified是錯誤的中心內容在導航欄上？

<nav class="navbar navbar-default navbar-fixed-top"> 
     <div class="container-fluid"> 
     <div class="navbar-header"> 
      <ul class="nav navbar-nav navbar-left"> 
      <a class="navbar-brand" href="#home"> LEFT </a> 
      </ul> 
      <ul class="nav navbar-nav navbar-justified"> 
      <a href="#"> CENTER </a> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
      <li> 
      <a href="#facebook"> <img src="fb.png" class="fb"> RIGHT </a> 
      </li> 
     </ul> 
     </div> 
    </nav>

來源

2015-10-20 Ben Casalino

也嘗試添加到ALIGN = 「中心」到一個div，UL和Li和沒有工作。但也許這是一個更好的方法來集中內容？ –

可以使用的navbar-left/navar-right類來定位你的鏈接和自定義類，根據你需要它的大小來定位navbar-brand。請參閱工作示例代碼段。

.navbar-custom .navbar-brand.navbar-brand-centered { 
 
    position: absolute; 
 
    left: 50%; 
 
    display: block; 
 
    width: 200px; 
 
    text-align: center; 
 
    top: 0; 
 
} 
 
.navbar.navbar-custom > .container .navbar-brand.navbar-brand-centered, 
 
.navbar.navbar-custom > .container-fluid .navbar-brand.navbar-brand-centered { 
 
    margin-left: -100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="navbar navbar-default navbar-custom" role="navigation"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse"> <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 

 
     </button> 
 
    </div> <a class="navbar-brand navbar-brand-centered" href="#/">Brand</a> 
 

 
    <div class="collapse navbar-collapse" id="js-navbar-collapse"> 
 
     <ul class="nav navbar-nav navbar-left"> 
 
     <li><a href="#/">Link</a> 
 

 
     </li> 
 
     <li><a href="#">Link</a> 
 

 
     </li> 
 
     </ul> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#">Link</a> 
 

 
     </li> 
 
     <li><a href="#">Link</a> 
 

 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="container"> 
 
    <div class="well">Yup</div> 
 
</div>

來源

2015-10-20 02:57:19 vanburen

不客氣，請將您的問題標記爲答案，如果解決方案起作用，那麼其他人可以從中受益。 – vanburen

好吧，我今天就試着嘗試一下，我創建了一個除此代碼之外沒有別的東西的項目，並且它似乎沒有將內容居中，這很奇怪，因爲它在提供的代碼片段中工作。 –

我想到的唯一領域是我使用自定義類來不直接覆蓋框架（在這個例子中是一個通用的.navbar-自定義和.navbar-品牌爲中心的），另一個是導航品牌的大小中心可能需要調整，具體取決於文本的長度。但請讓我知道。 – vanburen

在自舉導航欄中左，右和居中內容

回答

相關問題