中心引导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导航栏

回答

相关问题