web-dev-qa-db-fra.com

Formulaire de déconnexion dans la liste déroulante Bootstrap navbar

J'ai une barre de navigation Bootstrap3 avec un menu déroulant.

Je veux mon formulaire de "déconnexion" dans cette liste déroulante. Ce n'est pas un formulaire visible, mais simplement un bouton de déconnexion dans un formulaire.

J'ai essayé ceci:

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

Mais ce n'est pas stylé correctement.

Comment puis-je le faire correspondre à des liens déroulants normaux? J'espère que je n'ai pas besoin de modifier manuellement le fichier css, et qu'il existe un moyen intégré de faire cela

htmlcsstwitter-bootstraptwitter-bootstrap-3
5
grokky

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

Je vous ai aidé d'une certaine manière

0
Leonardo Costa

Cela ne fonctionnera pas vraiment, mais vous pouvez créer le formulaire de déconnexion ailleurs:

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

et lorsque l'utilisateur clique sur logout, il vous suffit d'appeler

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

en Javascript ou vous définissez

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

essayez ceci en donnant simplement un lien vers le fichier .Java/servlet.

<li><a href="Logout"><span class="glyphicon glyphicon-user"></span>Logout</a></li>
0
user10972532