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>

Я просто хотів би, щоб це не руйнувалось, бо мені це не потрібно, як це зробити?

Я хотів би уникати написання 300 тис. Рядків CSS для заміни стилів за замовчуванням.

Будь-яка пропозиція?

Після ретельного вивчення не 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 виконують відповідні дії:

1. .collapseВластивість за замовчуванням у bootstrap приховує праву частину меню для планшетів (пейзаж) та телефонів, і замість цього відображається кнопка перемикання, щоб приховати / показати його. Таким чином, ця властивість замінює за замовчуванням і постійно відображає ці елементи.

2. Щоб праворуч меню відображалося на одному рядку разом із лівим, нам потрібно, щоб лівий бік був плаваючим лівим.

3. Ця властивість присутня за замовчуванням у завантажувальному файлі, але не на планшеті (портрет) до роздільної здатності телефону. Ви можете пропустити цей, імовірно, це не вплине на загальну панель навігації.

4. Це зберігає праворуч меню праворуч, тоді як внутрішні елементи ( li) будуть слідувати властивості 2. Отже, ми маємо лівий плаваючий лівий та правий плаваючий праворуч, який зводить їх в один рядок.

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

Можна змінити @grid-float-breakpointin variables.less і перекомпілювати Bootstrap. Роблячи це, вам також доведеться змінити @screen-xs-maxnavbar.less. Вам доведеться встановити це значення як нове @grid-float-breakpoint -1. Дивіться також: https://github.com/twbs/bootstrap/pull/10465 . Це потрібно для того, щоб змінити форми навігаційної панелі та випадаючі списки в @ grid-float-breakpoint на їх мобільну версію.

Найпростіший спосіб - це налаштувати bootstrap

знайти змінну:

 @grid-float-breakpoint

для якого встановлено значення @screen-sm, ви можете змінити його відповідно до своїх потреб. Сподіваюся, це допоможе!

Для користувачів SAAS

додайте свої користувацькі змінні, як $grid-float-breakpoint: 0px;до@import "bootstrap.scss";

Ось підхід, який залишає незмінною поведінку згортання за замовчуванням, дозволяючи завжди залишати видимим новий розділ навігації. Його збільшення 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.

Якщо ви не використовуєте меншу версію, ось рядок, який вам потрібно змінити:

@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;
  }
}

У 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

Інший спосіб - це просто видалити 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>