Question

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

首先，该怎么做？

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

谢谢，

乔

<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>

Answer 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/中的信息

为Bootstrap证明导航栏元素

1 个答案: