为 Bootstrap 对齐导航栏元素答案

【问题标题】：Justifying navbar elements for Bootstrap为 Bootstrap 对齐导航栏元素
【发布时间】：2015-04-27 00:59:39
【问题描述】：

我正在尝试构建一个导航栏，其元素在页面宽度上对齐。

首先，怎么做？

其次，这是导航栏的代码：这是正确的吗？如果没有，有人可以解释构建一个的正确方法吗？

谢谢，

乔

<div class="containr">
 <div id="navbar-main" class="navbar navbar-default">

   <div class="container">
    <ul class="nav navbar-nav">
     <li class="dropdown" id="foomenu"><a class="dropdown-toggle" 
       data-toggle="dropdown" href="#">Foo<b class="caret"></b></a>
     <ul class="dropdown-menu">
      <li><a href="#">X</a></li>
      <li><a href="#">Y</a></li>
      <li><a href="#">Z</a></li>
     </ul>
    </li>
    <li class="dropdown nav-menu-items" id="barmenu">
     <a class="dropdown-toggle" data-toggle="dropdown" href="#">Bar<b class="caret"></b></a>
     <ul class="dropdown-menu">
       <li><a href="#">A</a></li>
       <li><a href="#">B</a></li>
       <li><a href="#">C</a></li>
      </ul> 
     </li>

    <li id=smenu class=nav-menu-items><a href="#">S</a></li>
     <li id=contactmenu class=nav-menu-items><%= link_to "C", c_path %></li>

     <li class="dropdown nav-menu-items" id="Co">
       <a class="dropdown-toggle" data-toggle="dropdown" href="#">Co<b class="caret"></b></a>
         <ul class="dropdown-menu">
          <li><%= link_to "P", p_path %></li>
          <li><%= link_to "Car", car_path %></li>
          <li><a href="#">Man</a></li>
          <li><%= link_to "News", news_path %></li>
          <li><%= link_to "Cont", cont_path %></li>
         </ul> 
        </li>

       </ul>
      </div>
     </div>
    </div>

【问题讨论】：

How to justify navbar-nav in Bootstrap 3的可能重复
-1 因为：（a）您的问题似乎与stackoverflow.com/questions/19073813/… 完全相同，（b）您的问题显示零研究工作 - 您应该描述您已经尝试过的内容以及什么是当前的障碍；否则，唯一可能的答案是背诵文档，而这不是 StackOverflow 的用途，（c）“这是代码，它是否正确”的问题是零意义的，除非您定义“正确”，即您想要实现什么行为.
您是否尝试过简单地使用：class="navbar justified"？

标签： twitter-bootstrap

【解决方案1】：

<div class="container">
  <nav>
    <ul class="nav nav-justified">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Projects</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Downloads</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</div>

请参阅文档http://getbootstrap.com/components/#nav-justified 中的信息以及示例http://getbootstrap.com/examples/justified-nav/

【讨论】：