Я использую Bootstrap 3.0, чтобы показать навигационную панель с некоторыми ссылками и полем поиска. Когда я перехожу к «мобильной версии», у меня есть кнопка, которая разрушает навигационную панель и отображает все содержимое: ссылки и поле поиска. Теперь мне нужны две кнопки, одна из которых сворачивает только ссылки навигационной панели, а другая кнопка - только поле поиска. Как я могу это сделать?Кнопки множественного скроллинга в navbar с Bootstrap 3.0
13
A
ответ
18
Отдельные ссылки и форму поиска в двух navbar-collapse
элементов и каждая кнопка предназначаться соответствующая одна:
Пример разметки:
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#search">Toggle search</button>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#links">Toggle links</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<ul class="collapse navbar-collapse nav navbar-nav" id="links">
<!--Links go here-->
</ul>
<div class="collapse navbar-collapse" id="search">
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</nav>
Вы бы тогда просто нужно, чтобы исправить некоторые противоречивые стили между .navbar-nav
и .navbar-collapse
, добавив в ваш CSS:
@media (max-width:767px) {
.navbar-nav.navbar-collapse {
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
}
Вот demo fiddle
Смежные вопросы
- 1. Bootstrap 3.0 navbar toogles
- 2. Проблема с Navbar в Bootstrap 3.0
- 3. Создайте липкую сторону navbar в Bootstrap 3.0
- 4. Сделать Bootstrap 3.0 Содержимое NavBar всегда рушилось
- 5. Bootstrap 3.0 align navbar и логотип внизу
- 6. MVC - Bootstrap 3.0 - Изменение Navbar текст
- 7. Исправление Bootstrap 3 после скроллинга прокрутки
- 8. Bootstrap - Как сделать кнопки Navbar одинаковой шириной
- 9. кнопки Bootstrap на меню NavBar тумблер
- 10. bootstrap navbar navbar-nav issues
- 11. как отключить отзывчивый dropdown navbar в bootstrap 3.0
- 12. Вертикально выровнять логотип с помощью кнопки в Bootstrap 4 navbar
- 13. Bootstrap navbar с angularjs
- 14. Bootstrap с navbar logo
- 15. Bootstrap NavBar С impress.js
- 16. Styling Navbar Кнопка с Bootstrap
- 17. Bootstrap .navbar-toggle event
- 18. Navbar Bootstrap
- 19. Bootstrap Navbar с логотипом, центрированным внутри Navbar
- 20. Bootstrap navbar?
- 21. Стиль рухнул navbar в Bootstrap
- 22. Change Bootstrap 3.0 Navbar default resize to custom resize
- 23. Центр Navbar в Bootstrap
- 24. проблемы с bootstrap collapsible navbar
- 25. Динамический navbar в bootstrap
- 26. Bootstrap Navbar в AngularJs
- 27. Navbar в twitter-bootstrap
- 28. Ссылка в Bootstrap navbar
- 29. Bootstrap Navbar снижение высоты
- 30. Jekyll build bootstrap navbar
Отличный !! Спасибо!! –
Спасибо за это решение. Я также обнаружил, что необходимо добавить «margin-top: 0;» и «margin-bottom: 0;» в стили '.navbar-nav.navbar-collapse' выше, в противном случае по умолчанию вертикальные поля приводят к небольшому прыжку когда слайды .navbar-nav закрываются. Вот [исправленная скрипка] (http://jsfiddle.net/4Cc3p/1/) – russellb
Я искал решение jQuery для реализации поиска и не понимал, что вы можете просто скопировать кнопку меню Bootstrap. Подумайте об этом, это должно быть частью документов Bootstrap, так как разборный поиск - тоже типичный отзывчивый шаблон. Спасибо за умное решение! – alds