ナビゲーションバー内のフォームボタンの整列

Question

ボタンがフォーム内に折り返されているナビゲーションバーのボタンを正しく整列させる方法がちょっと残っています。問題は、アンカーと（フォーム内の）ボタンの両方がないということである

<nav class="navbar navbar-inverse navbar-fixed-top gcs-navbar" id="main-menu"> 
<div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed main-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <span class="navbar-brand">    
       Test    
     </span> 
    </div> 
    <div id="navbar" class="navbar-collapse collapse">    
     <ul data-toggle="collapse" data-target="#navbar.in" class="nav navbar-nav navbar-right"> 


        <li><a href="@menuItem.Path">One</a> </li> 
        <li><a href="@menuItem.Path">Two</a> </li> 
        <li><a href="@menuItem.Path">Three</a> </li> 

        <form asp-area="" asp-controller="Account" asp-action="LogOff" method="post" id="logoutForm" class="navbar-right"> 
    <ul class="nav navbar-nav navbar-right"> 
     <li> 
      <a asp-area="" asp-controller="Manage" asp-action="Index" title="Manage"> 
       <span class="fa fa-user"></span> 
       Daz 
      </a> 
     </li> 
     <li> 
      <button type="submit" class="btn btn-link navbar-btn navbar-link" style="border: none;padding-right:20px">Logout</button> 
     </li> 
    </ul> 
</form> 


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

：ここ

は、私が持っている（https://jsfiddle.net/darrelltunnell/DTcHh/24292/、ここでその容易な場合jsfiddleである）のマークアップです他のナビゲーションアイテムと正しく整列させる。

大変ありがとうございます。

Answer 1

あなたはこのよう<ul>タグを使用する必要があります。

<ul> 
    <li>Item1</li> 
    <li>Item2</li> 
</ul> 

<ul> 
    <li>Item3</li> 
    <li>Item4</li> 
</ul> 

あなたのコード：

<nav class="navbar navbar-inverse navbar-fixed-top gcs-navbar" id="main-menu"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed main-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <span class="navbar-brand"> Test </span> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
      <ul data-toggle="collapse" data-target="#navbar.in" class="nav navbar-nav navbar-right"> 

       <li> 
        <a href="@menuItem.Path">One</a> 
       </li> 
       <li> 
        <a href="@menuItem.Path">Two</a> 
       </li> 
       <li> 
        <a href="@menuItem.Path">Three</a> 
       </li> 
      </ul> 
      <form asp-area="" asp-controller="Account" asp-action="LogOff" method="post" id="logoutForm" class="navbar-right"> 

       <ul class="nav navbar-nav navbar-right"> 
        <li> 
         <a asp-area="" asp-controller="Manage" asp-action="Index" title="Manage"> <span class="fa fa-user"></span> Daz </a> 
        </li> 
        <li> 
         <button type="submit" class="btn btn-link navbar-btn navbar-link" style="border: none;padding-right:20px"> 
          Logout 
         </button> 
        </li> 
       </ul> 
      </form> 

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