Bootstrap 3 - 如何在导航栏中获得标签栏

Question

如何在标题栏中获得Bootstrap标签栏？ （见截图）

这是我的代码在这一刻：

 <div class="navbar navbar-inverse navbar-fixed-top"> 
      <div class="container-fluid"> 
       <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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> 
       <a class="navbar-brand" href="/">AppName</a> 
       </div> 
       <div class="navbar-collapse collapse"> 
       <form method="post" id="logoutForm" class="navbar-right" action="/Account/LogOff"> 
        <ul class="nav navbar-nav navbar-right" style="margin-right: 20px"> 
         <li> 
          <a title="Manage" href="/Account/Claims">User</a> 
         </li> 
         <li> 
          <button type="submit" class="btn btn-link navbar-btn navbar-link">Log off</button> 
         </li> 
        </ul> 
       </form> 
       </div> 
      </div> 
     </div> 

     <ul class="nav nav-tabs"> 
      <li><a href="/">Home</a></li> 
      <li class="active"><a href="#">Link A</a></li> 
      <li class=""><a href="#">Link B</a></li> 
      <li class=""><a href="#">Link C</a></li> 
      <li class=""><a href="#">Link D</a></li> 
      <li class=""><a href="/Admin">Admin</a></li> 
     </ul> 

谢谢！

Answer 1

您必须将下面的代码移动到navbar-header div的navbar-brand div之后。

<ul class="nav nav-tabs"> 
 
    <li><a href="/">Home</a></li> 
 
    <li class="active"><a href="#">Link A</a></li> 
 
    <li class=""><a href="#">Link B</a></li> 
 
    <li class=""><a href="#">Link C</a></li> 
 
    <li class=""><a href="#">Link D</a></li> 
 
    <li class=""><a href="/Admin">Admin</a></li> 
 
</ul>

你的代码看起来应该是这样

 <div class="navbar navbar-inverse navbar-fixed-top"> 
 
      <div class="container-fluid"> 
 
       <div class="navbar-header"> 
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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> 
 
       <a class="navbar-brand" href="/">AppName</a> 
 
       <ul class="nav nav-tabs"> 
 
        <li><a href="/">Home</a></li> 
 
        <li class="active"><a href="#">Link A</a></li> 
 
        <li class=""><a href="#">Link B</a></li> 
 
        <li class=""><a href="#">Link C</a></li> 
 
        <li class=""><a href="#">Link D</a></li> 
 
        <li class=""><a href="/Admin">Admin</a></li> 
 
       </ul> 
 
       </div> 
 
       <div class="navbar-collapse collapse"> 
 
       <form method="post" id="logoutForm" class="navbar-right" action="/Account/LogOff"> 
 
        <ul class="nav navbar-nav navbar-right" style="margin-right: 20px"> 
 
         <li> 
 
          <a title="Manage" href="/Account/Claims">User</a> 
 
         </li> 
 
         <li> 
 
          <button type="submit" class="btn btn-link navbar-btn navbar-link">Log off</button> 
 
         </li> 
 
        </ul> 
 
       </form> 
 
       </div> 
 
      </div> 
 
     </div>