ブートストラップ3 - ナビゲーションでタブバーを取得する方法

Question

ブートストラップタブバーをヘッダーのトップバーに挿入するにはどうすればよいですか？ （スクリーンショットを参照）

これは、現時点では私のコードです：

 <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-brandタグの後にnavbar-header 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>