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

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

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

<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 Свернуть

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

Ответы

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

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