Бутстрап 3 Динамический сбой Navbar

Я ищу решение проблемы с изменением размера с помощью bootstrap navbar.

В настоящее время navbar может иметь своего рода "перекрывающийся" эффект перед уплотнением. (Я знаю, что это связано с медиа-запросами)

Здесь используются медиа-запросы, чтобы диктовать, когда нужно идти компактно, однако я ищу решение, которое приведет к изменению размера навигатора только тогда, когда между ".navbar-nav" и ".navbar-right" нет места..

Это важно, потому что ".navbar-nav" и ".navbar-right" имеют динамическую ширину. (другими словами, иногда ".navbar-nav" будет содержать от 1 элемента списка до 5 элементов списка. ".navbar-right" аналогичен тому, что это строка текста, которая может быть от 3 до 100 символов длинный или даже длинный.

Ниже приведен пример plunker, где, изменяя размер области предварительного просмотра, вы видите, что происходит непреднамеренное "перекрытие" (поскольку он ожидает выполнения запроса максимальной ширины).

http://plnkr.co/edit/7r5fNX2JyJUuT0PvVPDf?p=preview

Как я могу его уплотнить только тогда, когда ".navbar-nav" и ".navbar-right" не имеют места между собой (например, 5px пространства между собой или что-то подобное)?

(учтите, что для достижения этого недостаточно корректировки точек останова)

Ответы

Ответ 1

Вы должны добавить пользовательский класс на свой навигатор и изменить стиль при достижении высоты:

<nav id="autocollapse" class="navbar navbar-default" role="navigation">
    ...
</nav>

function autocollapse() {
    var navbar = $('#autocollapse');
    navbar.removeClass('collapsed'); // set standart view
    if(navbar.innerHeight() > 50) // check if we've got 2 lines
        navbar.addClass('collapsed'); // force collapse mode
}

$(document).on('ready', autocollapse);
$(window).on('resize', autocollapse);

#autocollapse.collapsed .navbar-header {
    float: none;
}
#autocollapse.collapsed .navbar-toggle {
    display: block;
}
#autocollapse.collapsed .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
#autocollapse.collapsed .navbar-collapse.collapse {
    display: none!important;
}
#autocollapse.collapsed .navbar-nav {
    float: none!important;
    margin: 7.5px -15px;
}
#autocollapse.collapsed .navbar-nav>li {
    float: none;
}
#autocollapse.collapsed .navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
}

Bootply
Forked Plunker

Ответ 2

Возможно, стоит попробовать с jQuery:

$(document).ready(function() {
    var width_full = $('.navbar-collapse').innerWidth();
    var width_left = $('.navbar-nav').outerWidth(true);
    var width_right = $('.navbar-right').outerWidth(true);
    if (width_full - (width_left + width_right) < 0)
    {
        // trigger collapse, you have to figure out what css changes
        // exactly are needed, for example:
        $('.navbar-toggle').css('display', 'inline');
    }
});

Ответ 3

Невозможно определить CSS для самообучения, поэтому вам нужно переопределить стили для определенной ширины носителя. Кажется, что вы обертываете строку вокруг 910px;

Twitter Bootstrap (3) по умолчанию применяет display:none к .collapse, а затем повторно использует значение display:block, используя медиа-запрос для определения ширины окна просмотра шириной больше или равной 768 пикселей:

/* beginning at line 4412 in bootstrap.css,  v3.0.2 */  
@media (min-width: 768px) {

    ... /*other declarations ommitted here */

    .navbar-collapse.collapse {
        display: block !important;
        height: auto !important;
        padding-bottom: 0;
        overflow: visible !important;
    }

    ... /*other declarations ommitted here */
}

Таким образом, вы можете переопределить это с помощью нескольких более специфических медиа-запросов для вашего навигатора для диапазона значений, где вам нужно скрыть его (между 768px и 910px):

@media (min-width: 768px)  and max-width (max-width: 910px){

    #bs-example-navbar-collapse-1{

        display:none !important;
    }

Ответ 4

Для начальной загрузки 3.3.5 для zessx отсутствуют некоторые стили. используйте эти вместо:

    #autocollapse.collapsed .navbar-header {
        float: none;
    }
    #autocollapse.collapsed .navbar-left,.navbar-right {
        float: none !important;
    }
    #autocollapse.collapsed .navbar-toggle {
        display: block;
    }       
    #autocollapse.collapsed .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }       
    #autocollapse.collapsed .navbar-collapse.collapse {
        display: none!important;
    }
    #autocollapse.collapsed .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    #autocollapse.collapsed .navbar-nav>li {
        float: none;
    }
    #autocollapse.collapsed .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    #autocollapse.collapsed .collapse.in{
        display:block !important;
    }

Еще одна вещь. zessx использует 50px для краха. Там круглая проблема, когда вы применяете Zoom к исследователю. Например, высота навигатора может составлять 53 пикселя, а затем меню рушится. Я предлагаю изменить значение 50 пикселей на 70 пикселей. Поэтому я предлагаю:

function autocollapse() {
            var navbar = $('#autocollapse');
            navbar.removeClass('collapsed'); // set standart view
            if (navbar.innerHeight() > 70) // check if we've got 2 lines
                navbar.addClass('collapsed'); // force collapse mode
        }