Bootstrap導航欄下拉菜單中的註銷表單

Question

我有一個帶有下拉菜單的Bootstrap3導航欄。

我希望我的「註銷」表單在該下拉內。它不是一個可見的形式，只是一個表單內的註銷按鈕。

我嘗試這樣做：

<div class="navbar-collapse collapse"> 
    <ul class="nav navbar-nav"> 
    <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Dropdown<span class="caret"></span></a> 
     <ul class="dropdown-menu"> 

     <!-- this dropdown menu item looks right --> 
     <li><a href="#">Foo</a></li> 

     <!-- this dropdown menu item (a logout form) does not --> 
     <li><form action="/logout" method="post"><button type="submit" class="btn btn-link navbar-btn navbar-link">Log off</button></form></li> 

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

但它沒有正確的風格。

如何使它與正常的下拉鍊接相匹配？我希望我不需要手動調整CSS，並且有內置的方法來做到這一點？

Answer 1

試試這個Sample [UPDATED]

.btn-logout { 
 
    width: 100%; 
 
    padding: 3px 20px !important; 
 
    text-align: left !important; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-lg-12"> 
 
     <nav class="navbar navbar-default"> 
 
     <div class="container-fluid"> 
 
      <!-- Brand and toggle get grouped for better mobile display --> 
 
      <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
 
       <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="#">Brand</a> 
 
      </div> 
 

 
      <!-- Collect the nav links, forms, and other content for toggling --> 
 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
      <ul class="nav navbar-nav"> 
 
       <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a> 
 
       </li> 
 
       <li><a href="#">Link</a> 
 
       </li> 
 
       <li class="dropdown"> 
 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
       <ul class="dropdown-menu"> 
 
        <li><a href="#">Action</a> 
 
        </li> 
 
        <li><a href="#">Another action</a> 
 
        </li> 
 
        <li><a href="#">Something else here</a> 
 
        </li> 
 
        <li role="separator" class="divider"></li> 
 
        <li><a href="#">Separated link</a> 
 
        </li> 
 
        <li role="separator" class="divider"></li> 
 
        <li><a href="#">One more separated link</a> 
 
        </li> 
 
       </ul> 
 
       </li> 
 
      </ul> 
 
      <form class="navbar-form navbar-left"> 
 
       <div class="form-group"> 
 
       <input type="text" class="form-control" placeholder="Search"> 
 
       </div> 
 
       <button type="submit" class="btn btn-default">Submit</button> 
 
      </form> 
 
      <ul class="nav navbar-nav navbar-right"> 
 
       <li><a href="#">Link</a> 
 
       </li> 
 
       <li class="dropdown"> 
 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
       <ul class="dropdown-menu"> 
 
        <li><a href="#">Action</a> 
 
        </li> 
 
        <li><a href="#">Another action</a> 
 
        </li> 
 
        <li><a href="#">Something else here</a> 
 
        </li> 
 
        <li role="separator" class="divider"></li> 
 
        <li><a href="#">Separated link</a> 
 
        </li> 
 
        <li> 
 
        <form> 
 
         <button type="submit" class="btn btn-link btn-logout">Logout</button> 
 
        </form> 
 
        </li> 
 
       </ul> 
 
       </li> 
 
      </ul> 
 
      </div> 
 
      <!-- /.navbar-collapse --> 
 
     </div> 
 
     <!-- /.container-fluid --> 
 
     </nav> 
 
    </div> 
 
    </div> 
 
</div>

我已在某些方面

Answer 2

這將沒有真正的工作，但你可以創建註銷形式別處：

<form id="logout-form" style="display:none" action="/logout" method="POST"></form> 

，當用戶點擊logout你只需要調用

document.getElementById("logout-form").submit(); 

在Javascript，或者你設置

onclick="document.getElementById('logout-form').submit();"