Bootstrap 3 - отключить сворачивание панели навигации

88

Это моя простая навигационная панель:

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

Я просто хотел бы предотвратить его обрушение, потому что мне это не нужно, как это сделать?

Я бы не хотел писать 300 тысяч строк CSS для переопределения стилей по умолчанию.

Любое предложение?

css twitter-bootstrap-3 navbar collapse preventdefault это я
источник

Ответы:

138

После тщательного изучения, не 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;
}

И при этом ваше меню не рухнет.

ДЕМО ( jsfiddle )

ОБЪЯСНЕНИЕ

Четыре свойства CSS выполняют следующие функции:

  1. Свойство по умолчанию .collapseв начальной загрузке скрывает правую часть меню для планшетов (альбомная ориентация) и телефонов, и вместо этого отображается кнопка переключения, чтобы скрыть / показать его. Таким образом, это свойство отменяет значение по умолчанию и постоянно показывает эти элементы.

  2. Чтобы правое меню отображалось в одной строке с левым, нам нужно, чтобы левая сторона перемещалась влево.

  3. Это свойство присутствует по умолчанию в начальной загрузке, но не в разрешении планшета (портретное) для телефона. Вы можете пропустить это, это не повлияет на вашу навигационную панель в целом.

  4. Это удерживает правое меню вправо, в то время как внутренние элементы ( li) будут следовать за свойством 2. Итак, у нас есть левый float left и правый float right, что объединяет их в одну строку.

АйБ
источник
2
@gwho Только что добавил пояснение к ответу.
AyB 01
1
Если он станет достаточно тонким, плавающий левый и плавающий правый элементы могут наматываться друг на друга (я говорю о uls, а не о lis). Как лучше всего предотвратить это?
ahnbizcad
2
Если ваше единственное требование - предотвратить превращение списка UL / LI в вертикальный, второй CSS - это все, что вам нужно.
JamesB
1
В !importantзаявлении не нужно здесь, для меня это работает без. По возможности старайтесь избегать их (! Важно).
Тим-Эрвин,
2
@ICanHasKittenz Выпадающие списки по-прежнему изменяют поведение, когда <768 пикселей, они отображаются в панели навигации (свернутый вид) внутри, появляясь в плавающем белом поле (поведение без свертывания), как и следовало ожидать. И раскрывающийся заголовок расширяется при нажатии, заставляя другие элементы перемещаться. Просто добавьте раскрывающийся список в элементе панели навигации, и вы увидите его сами.
Roubi
24

Набвар рухнет на маленьких устройствах. Точка схлопывания определяется @grid-float-breakpointв переменных. По умолчанию это будет раньше 768px. Для экранов ниже 768ширины экрана в пикселях панель навигации будет выглядеть так:

введите описание изображения здесь

Можно изменить @grid-float-breakpointin variables.less и перекомпилировать Bootstrap. При этом вам также придется изменить @screen-xs-maxфайл navbar.less. Вам нужно будет установить это значение на свой новый @grid-float-breakpoint -1. См. Также: https://github.com/twbs/bootstrap/pull/10465 . Это необходимо для изменения форм и раскрывающихся списков навигационной панели в точке останова @ grid-float-break на их мобильную версию.

Самый простой способ - настроить бутстрап

найти переменную:

 @grid-float-breakpoint

установлен @screen-sm, вы можете изменить его в соответствии со своими потребностями. Надеюсь, это поможет!

Для пользователей SAAS

добавьте свои пользовательские переменные, как $grid-float-breakpoint: 0px;перед@import "bootstrap.scss";

Гаган Гами
источник
4
это действительно полезно. К сожалению, я использую загрузочный CDN, поэтому я не могу настроить основной файл начальной загрузки, какие-либо советы о том, как это сделать в отдельном файле css?
itsme
2
+1 для переменной @ grid-float-breakpoint на странице настройки начальной загрузки, это помогло мне!
Wietse
4
Для пользователей SASS: просто добавьте свои пользовательские переменные, как $grid-float-breakpoint: 0px;перед @import "bootstrap.scss";строкой
Duvrai
5

Вот подход, который оставляет неизменным поведение сворачивания по умолчанию, позволяя всегда оставаться видимым новый раздел навигации. Его увеличение 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.

Джереми Кук
источник
0

Если вы не используете меньшую версию, вам нужно изменить следующую строку:

@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;
  }
}
Майкл Риббонс
источник
0

Следующее решение сработало для меня в 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
Кристи Драгичи
источник
0

Другой способ - просто убрать collapse navbar-collapseиз разметки. Пример с Bootstrap 3.3.7

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<nav class="navbar navbar-atp">
  <div class="container-fluid">
    <div class="">
      <ul class="nav navbar-nav nav-custom">
        <li>
          <a href="#" id="sidebar-btn"><span class="fa fa-bars">Toggle btn</span></a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li>Nav item</li>
      </ul>
    </div>
  </div>
</nav>
Развернуть фрагмент

выкопать
источник