#html #css #twitter-bootstrap #twitter-bootstrap-3
#HTML #css #twitter-bootstrap #twitter-bootstrap-3
Вопрос:
У меня есть панель навигации 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, и что есть встроенный способ сделать это?
Ответ №1:
На самом деле это не сработает, но вы можете создать форму выхода из системы где-нибудь еще:
<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();"
Комментарии:
1. Это сработало бы, но я бы предпочел избегать script для чего-то настолько простого. Если никто другой не знает, как это сделать, я просто создам пользовательский стиль. Ваш способ работает, так что спасибо.
2. @grokky Javascript является стандартным, поэтому вы можете использовать их для всего, что вам нравится 🙂
3. @timmyRS Проблема с использованием JavaScript здесь заключается в том, что любой, у кого отключен JavaScript, не сможет выйти из системы. Для некоторых это может не быть проблемой. Но большинство рекомендует, чтобы ваш сайт по-прежнему функционировал без JavaScript. Хотя службы поддержки JavaScript становятся все более и более распространенными, так что, вероятно, это все меньше и меньше проблема.
Ответ №2:
попробуйте этот пример [ОБНОВЛЕНО]
.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> Я вам каким-то образом помог
Комментарии:
1. Написано «Ошибка: для JavaScript Bootstrap требуется jQuery»?
2. @grokky Посмотрите на мой пример ссылки в начале ответа, там пример правильный.
3. @grokkysorry, мой jsFiddle сломан. Я настрою и отправлю вам новую.
4. @grokky готово. Я только что добавил новый образец ссылки. Что угодно, просто дайте мне знать 🙂
5. css работает, спасибо. Жаль, что это не встроено в Bootstrap. Она предназначена для ссылки, использующей
>a, которая является причиной проблемы.
Ответ №3:
попробуйте это, просто дайте ссылку на файл .java / servlet.
<li><a href="Logout"><span class="glyphicon glyphicon-user"></span>Logout</a></li>
Комментарии:
1. Каким образом это помогает?