Bootstrap 3 - отключить навигация
Это мой простой навигатор:
<div class="navbar navbar-fixed-top myfont" role="navigation">
<div class="">
<ul class="nav navbar-nav navbar-left">
<li>
<a class="navbar-brand" href="#">
<img src="assets/img/logo.png"/>
</a>
</li>
<li>
<button class="btn btn-navbar">
<i class="fa fa-edit"></i>
Create
</button>
</li>
</ul>
</div>
<ul class="nav navbar-nav navbar-right">
<li data-match-route="/"><a href="#/page-one">Login</a></li>
<li data-match-route="/"><a href="#/page-two/sub-a">Signup</a></li>
</ul>
</div>
Я просто хочу, чтобы это не сработало, потому что мне это не нужно, как это сделать?
Я хотел бы избежать написания строк 300K CSS для переопределения стилей по умолчанию.
Любое предложение?
Ответы
Ответ 1
После тщательного изучения не 300k строк, но есть около 3-4 CSS-свойств, которые вам необходимо переопределить:
.navbar-collapse.collapse {
display: block!important;
}
.navbar-nav>li, .navbar-nav {
float: left !important;
}
.navbar-nav.navbar-right:last-child {
margin-right: -15px !important;
}
.navbar-right {
float: right!important;
}
И с этим ваше меню не рухнет.
DEMO (jsfiddle)
ОБЪЯСНЕНИЕ
Четыре свойства CSS делают следующее:
-
Свойство .collapse по умолчанию в бутстрапе скрывает правую часть меню для планшетов (пейзаж) и телефонов, и вместо этого отображается кнопка переключения, чтобы скрыть/показать ее. Таким образом, это свойство переопределяет значение по умолчанию и настойчиво показывает эти элементы.
-
Для того, чтобы правое меню отображалось на одной и той же строке вместе с левой стороной, нам нужно, чтобы левая сторона была плавающей слева.
-
Это свойство присутствует по умолчанию в bootstrap, но не на планшете (портрет) до разрешения телефона. Вы можете пропустить этот вариант, это скорее всего не повлияет на ваш общий навигатор.
-
Это сохраняет правое меню справа, в то время как внутренние элементы (li) будут следовать за свойством 2. Таким образом, у нас есть левая левая и правая поплавки справа, что приводит их к одному линия.
Ответ 2
Набвар рухнет на небольших устройствах. Точка свертывания определяется @grid-float-breakpoint в переменных. По умолчанию это будет раньше 768px. Для экранов ниже ширины экрана 768 пикселей навигационная панель будет выглядеть так:
![enter image description here]()
Можно изменить @grid-float-breakpoint в переменных .less и перекомпилировать Bootstrap. При этом вам также придется изменить @screen-xs-max на navbar.less. Вам нужно будет установить это значение для вашего нового @grid-float-breakpoint -1. См. Также: https://github.com/twbs/bootstrap/pull/10465. Это необходимо для изменения форм и выпадающих списков в точке @grid-float-breakpoint для их мобильной версии.
Самый простой способ - настроить загрузку
найти переменную:
@grid-float-breakpoint
который установлен на @screen-sm, вы можете изменить его в соответствии с вашими потребностями. Надеюсь, это поможет!
Для пользователей SAAS
добавьте свои пользовательские переменные, например $grid-float-breakpoint: 0px;, перед @import "bootstrap.scss";
Ответ 3
Здесь подход, который оставляет поведение по умолчанию по умолчанию неизменным, позволяя всегда оставаться видимым новый раздел навигации. Его увеличение navbar; navbar-header-menu - это класс CSS, который я создал и не является частью самого Bootstrap.
Поместите это в элемент navbar-header после navbar-brand:
<div class="navbar-header-menu">
<ul class="nav navbar-nav">
<li class="active"><a href="#">I'm always visible</a></li>
</ul>
<form class="navbar-form" 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>
Добавьте этот CSS:
.navbar-header-menu {
float: left;
}
.navbar-header-menu > .navbar-nav {
float: left;
margin: 0;
}
.navbar-header-menu > .navbar-nav > li {
float: left;
}
.navbar-header-menu > .navbar-nav > li > a {
padding-top: 15px;
padding-bottom: 15px;
}
.navbar-header-menu > .navbar-nav .open .dropdown-menu {
position: absolute;
float: left;
width: auto;
margin-top: 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.15);
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
.navbar-header-menu > .navbar-form {
float: left;
width: auto;
padding-top: 0;
padding-bottom: 0;
margin-right: 0;
margin-left: 0;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-header-menu > .navbar-form > .form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
.navbar-header-menu > .navbar-left {
float: left;
}
.navbar-header-menu > .navbar-right {
float: right !important;
}
.navbar-header-menu > *.navbar-right:last-child {
margin-right: -15px !important;
}
Проверьте скрипт: http://jsfiddle.net/L2txunqo/
Предостережение: navbar-right можно использовать для сортировки элементов визуально, но не гарантирует, что элемент будет перемещен в самую дальнюю правую часть экрана. Скрипка демонстрирует, что поведение с navbar-form.
Ответ 4
Если вы не используете меньшую версию, вот строка, которую вам нужно изменить:
@media (max-width: 767px) { /* Change this to 0 */
.navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
box-shadow: none;
}
.navbar-nav .open .dropdown-menu > li > a,
.navbar-nav .open .dropdown-menu .dropdown-header {
padding: 5px 15px 5px 25px;
}
.navbar-nav .open .dropdown-menu > li > a {
line-height: 20px;
}
.navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-nav .open .dropdown-menu > li > a:focus {
background-image: none;
}
}
Ответ 5
Следующее решение работало для меня в Bootstrap 3.3.4:
CSS
/*no collapse*/
.navbar-collapse.collapse.off {
display: block!important;
}
.navbar-collapse.collapse.off ul {
margin: 0;
padding: 0;
}
.navbar-nav.no-collapse>li,
.navbar-nav.no-collapse {
float: left !important;
}
.navbar-right.no-collapse {
float: right!important;
}
затем добавьте класс .no-collapse в каждый из списков и класс .off в основной контейнер. Вот пример, написанный в нефрите:
nav.navbar.navbar-default.navbar-fixed-top
.container-fluid
.collapse.navbar-collapse.off
ul.nav.navbar-nav.no-collapse
li
a(href='#' class='glyph')
i(class='glyphicon glyphicon-info-sign')
ul.nav.navbar-nav.navbar-right.no-collapse
li.dropdown
a.dropdown-toggle(href='#', data-toggle='dropdown' role='button' aria-expanded='false')
| Tools
span.caret
ul.dropdown-menu(role='menu')
li
a(href='#') Tool #1
li
a(href='#')
| Logout
