Отключить Bootstrap 3 navbar, идущий на 2 ряда в среднем размере

Ответ 1

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

Установите это значение в более высокое значение, значение по умолчанию - 768px, пропустит 2 строки. Попробуйте 992px, границу средней сетки.

Чтобы изменить точку останова с плавающей точкой, у вас будет две возможности:

• загрузите источник из github, измените @grid-float-breakpoint на переменные .less и перекомпилируйте bootstrap
• используйте customizer и загрузите собственную копию.

Смотрите также: fooobar.com/questions/34186/...

UPDATE

cvrebert на https://github.com/twbs/bootstrap/issues/11539#issuecomment-28805244:

Ваши варианты:

• измените точку останова с плавающей точкой сетки так, чтобы навигационная панель оставалась свернутой, пока экран не станет достаточно широким для вашего большого навигатора.
• используйте отзывчивые классы полезности, чтобы скрыть некоторые части навигационной панели при более узкой ширине экрана, чтобы она соответствовала этим ширинам
• переделайте свои элементы навигационной панели, чтобы они были короче/менее подробными.

Ответ 2

Для чего это стоит, вот идея, которая делает морские объекты морфинга от текста до значка на основе текущего гибкого размера.

<li><a href="#contact"><div class="hidden-sm">Contact<b class="caret"></b></div><span class="glyphicon glyphicon-plus visible-sm"></span></a></li>

В результате текст "Контакт" преобразуется в значок "плюс" небольшого размера. Вот пример bootply

Ответ 3

Альтернативное решение, которое не требует перекомпиляции бутстрапа, добавляет следующее к вашему css:

@media (max-width: 950px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    .navbar-collapse.collapse.in { 
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
}

ИЗМЕНИТЬ, как это работает:. Это указывает браузеру сворачивать навигационную панель в навигатор, если носитель меньше ширины пикселя. Вы должны установить ширину пикселя соответствующим образом, чтобы избежать получения 2-строчной навигационной панели. Я использую это для своего веб-сайта navbar, который мне нужен только для работы с chrome/ipad/iphone/samsung mobile. Это, возможно, взлом, но это просто и легко проверить.

Ответ 4

Нашел более простой способ уменьшить навигационную панель, используя намек на другой ответ, размещенный где-то, используя white-space: nowrap. Вот что хорошо работает:

<div class="container-fluid">
    <div class="collapse navbar-collapse navbar-ex1-collapse" style="width:100%;float:none;position:relative;">
        <ul class="nav navbar-pills nav-justified" role="navigation" style="width:auto;white-space: nowrap;">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Heading 1 <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Item 1</a></li>
                    <li><a href="#">Item 2</a></li>
                </ul>
            </li> ...
           </ul>
      </div>
</div>