中心引導3導航欄

裏面一個Rails應用程序，並使用引導3，我們正在努力建設一個導航，具有以下特點：中心引導3導航欄

標誌，左邊
主對齊菜單，中心
/籤菜單，在右對齊的標誌

到目前爲止，這是我們_header.html.erb局部佈局文件：

<header class="navbar navbar-fixed-top navbar-inverse"> 
    <div class="container"> 
    <%= link_to "App Name", root_path, id: "logo" %> 
    <nav> 
     <ul id="main_menu" class="nav navbar-nav navbar-left"> 
     <li><%= link_to "Features", features_path %></li> 
     <li><%= link_to "Pricing", pricing_path %></li> 
     <li><%= link_to "Blog", '#' %></li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><%= link_to "Sign In", '#' %></li> 
     <li><%= link_to "Sign Up", signup_path %></li> 
     </ul> 
    </nav> 
    </div> 
</header>

編輯：這是我們生成的HTML代碼：

<header class="navbar navbar-fixed-top navbar-inverse"> 
    <div class="container"> 
    <a id="logo" href="/">App Name</a> 
    <nav> 
     <ul id="main_menu" class="nav navbar-nav"> 
     <li><a href="/features">Features</a></li> 
     <li><a href="/pricing">Pricing</a></li> 
     <li><a href="#">Blog</a></li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">Sign In</a></li> 
     <li><a href="/signup">Sign Up</a></li> 
     </ul> 
    </nav> 
    </div> 
</header>

我們嘗試下面的CSS代碼：

/* header */ 

#logo { 
    float: left; 
    margin-right: 10px; 
    font-size: 1.7em; 
    color: #fff; 
    text-transform: uppercase; 
    letter-spacing: -1px; 
    padding-top: 9px; 
    font-weight: bold; 
} 

#logo:hover { 
    color: #fff; 
    text-decoration: none; 
} 

#main_menu { 
    margin: 0 auto; 
    text-align:center; 
} 

#main_menu li { 
    float:none; 
    display:inline-block; 
}

它沒有工作（沒有改變任何東西）。

我們也嘗試：

/* Code not reproduced for brevity */ 

#main_menu { 
      width: 100%; 
      text-align:center; 
     } 

     #main_menu li { 
      float:none; 
      display:inline-block; 
     }

它也不能工作，甚至打破了我們的佈局：

enter image description here

我們怎麼能不居中打破布局<ul id="main_menu" class="nav navbar-nav navbar-left">...</ul>導航欄？

來源

2015-06-30 Thibaud Clement

無論標記是什麼，它都不是HTML。除非您的模板代碼生成正確的標記時遇到問題，否則只發布已編譯的HTML。 – cimmanon

在Bootstrap中，navbar品牌被包含在類「navbar-brand」的'a'標籤中，可能是您的問題的原因 – Cyzanfar

@cimmanon done;） –

您應該使用col-xs-X電網做到這一點，我已經粘貼你這裏的工作代碼：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title></title> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> 
 
    <style type="text/css"> 
 
    .main_menu { 
 
     width: 100% 
 
    } 
 

 
    .main_menu li { 
 
     float:none; 
 
     display:inline-block; 
 
    } 
 
    </style> 
 
</head> 
 
<body> 
 
    <header class="navbar navbar-fixed-top navbar-inverse"> 
 
    <div class="container"> 
 
     <nav> 
 
     <div class="col-xs-3"> 
 
      <a class="navbar-brand" href="/">App Name</a> 
 
     </div> 
 
     <div class="col-xs-6 text-center"> 
 
     <ul class="main_menu nav navbar-nav"> 
 
      <li><a href="/features">Features</a></li> 
 
      <li><a href="/pricing">Pricing</a></li> 
 
      <li><a href="#">Blog</a></li> 
 
     </ul> 
 
     </div> 
 
     <div class="col-xs-3"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li><a href="#">Sign In</a></li> 
 
      <li><a href="/signup">Sign Up</a></li> 
 
     </ul> 
 
     </div> 
 
     </nav> 
 
    </div> 
 
    </header> 
 
</body> 
 
</html>

PS：儘量不要」 t在css中使用id選擇器，this is why。

來源

2015-06-30 13:07:08

謝謝。它確實像魅力一樣工作。關於CSS中的id選擇器：正確指出。 –

您的導航欄品牌應包含在a標籤中。更改<%= link_to "App Name", root_path, id: "logo" %>到

<a class="navbar-brand" href="<%= root_path %>">APP NAME</a>

來源

2015-06-30 11:59:28 Cyzanfar

實際上，我只是用生成的html代碼（而不是erb代碼）編輯問題，你可以看到我們有App Name –

中心引導3導航欄

回答

相關問題