Увеличьте контрольную точку останова бутстрапов, не затрагивая другую навигационную панель на той же странице

У меня есть страница. Вертикально он состоит из двух частей. Верх - это навигационная панель. Нижняя часть - это содержимое страницы.

Нижняя часть имеет класс "контейнер" начальной загрузки. Внутри контейнера левая сторона является областью навигации. Правая сторона - это контент, в котором есть другой навигатор. Вот что у меня для навигатора.

<div class="navbar navbar-default" role="navigation">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

        </div>
        <div class="navbar-collapse collapse" id="control-panel">
            <ul class="nav navbar-nav">

                <li class="dropdown">
                    <a href="#" >Menu 1</a>
                </li>               
                <li class="dropdown">
                    <a href="#" >Menu 2</a>
                </li>               
                    <li class="dropdown">
                    <a href="#" >Menu 3</a>
                </li>               


            </ul>

        </div><!--/.nav-collapse -->

</div> <!-- end of  navbar -->

Обратите внимание, что я удалил непосредственный "контейнерный" дочерний элемент "navbar", найденный в обычных примерах навигации, как в этой ссылке: http://getbootstrap.com/examples/navbar/. В этом контейнере навигационная панель не работает с выпадающими списками.

Пока работает navbar, но я хотел бы увеличить его точку останова для краха. Я нашел несколько связанных записей в SO, таких как

Bootstrap 3 Свернуть Navbar Свернуть

но до сих пор не знаю, как заставить его работать в моем случае. У меня есть эта встроенная навигационная панель только на этой странице, а не на сайте.

Ответ 1

После рассмотрения ввода Erik я играл, чтобы узнать, могу ли я настроить Bootstrap, только нацеливаясь на вторую навигационную панель, и кажется, что я сделал ее работу.

Вот как. Я завернул вторую навигационную панель в div как ниже:

<div id="target">
    <div class="navbar navbar-default" role="navigation">
    .....
    </div> <!-- end of  navbar -->
</div>

Затем я следил за тем, что сказано в этом сообщении SO: Bootstrap 3 Свернуть Navbar Свернуть

Вот мой последний CSS:

@media (max-width: 991px) {
    #target {

        .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;
        }
        /* since 3.1.0 */
        .navbar-collapse.collapse.in { 
            display: block!important;
        }
        .collapsing {
            overflow: hidden!important;
        }
    }
}

Пока это работает. Если то, что я сделал, неправильно, сообщите мне. Если это правильно, надейтесь, что это поможет кому-то другому.

Приветствия.

Ответ 2

Per Документация по загрузке

Измените точку, в которой ваш навигатор переключается между спящим и горизонтальным режимами. Настройте переменную @grid-float-breakpoint или добавьте собственный медиа-запрос.

В общем, это изменило бы все ваши точки останова для всех NavBars. Таким образом, из BootStrap нет готового решения. Я бы предложил создать собственный набор стилей, которые дублируют NavBars с вашими пользовательскими точками перерыва.