Nov 15 2013 at 06:43

Забавный баг панели навигации в Bootstrap 3

Invite pending

Доброго времени суток, хабражители!
Сегодня я хотел бы Вам рассказать о необычном поведении навигационной панели в bootstrap 3. Предварительное гугление и поиск по хабру не дал никаких результатов, поэтому было решено написать небольшую обзорную статью.

Небольшая предыстория

Я не являюсь веб-разработчиком, но меня всегда тянуло к созданию сайтов и работе с frontend. Очень часто хотелось написать что-то свое с красивым интерфейсом, кнопочками и менюшками. Но все сводилось к тому, что появлялись уродливые разноцветные кнопки, обыкновенная менюшка и проблемы с версткой. Было впечатление что сверстанная страница жила своей жизнью и блоки постоянно куда-то уезжали, что-то исчезало или сдвигалось. Тогда было принято решение довериться знающим людям и попробовать популярный ныне css-фреймворк от twitter.

А вот и главный герой

На самом же первом уроке из туториала с youtube была сверстана адаптивная ~~багнутая~~ навигационная панель.
Пример панельки из туториала:

Навигационная панель

    <div class="navbar navbar-inverse navbar-static-top">
        <div class="container">
            <a href="#" class="navbar-brand">Brand</a>
            <button class="navbar-toggle" data-toggle="collapse" data-target=".toggleItem">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="collapse navbar-collapse toggleItem">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="#">Home</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Twitter</a></li>
                            <li><a href="#">VK</a></li>
                        </ul>
                    </li>
                    <li><a href="#about">About</a></li>
                </ul>
            </div>
        </div>
    </div>

После успешного создания панельки в ход пошел метод тыка. Если немного поиграть с увеличением и уменьшением окна браузера и раскрытием выдающего списка то можно заметить одну особенность. Нужно уменьшить окно браузера до момента когда кнопки панельки группируются в одну. Затем раскрыть выпадающее меню нажатием на кнопку. Затем не закрывая меню развернуть окно браузера. Выпадающий список исчезает, кнопки возвращаются на свои законные места и вроде бы все хорошо. Но теперь панель у нас особенная. При нажатии на выпадающий список происходит следующее:

Выпадающий список открывается внутри панели навигации:

Вот в принципе и все что хотелось сказать по поводу этой интересной «особенности». Возможно кто-то слышал об этом или даже знает как исправить. Милости просим отписаться в комментариях.

P.S. Баг проявляется в chrome «30.0.1599.101 m», IE версии «11.0.9600.16438» Как обстоят дела с другими браузерами неизвестно.
P.P.S. Если баг и правда является неисправностью и имеет место быть, то может кто из знающих людей сможет опубликовать issue в github. А то с уровнем английского туговато.

Спасибо за внимание. Приятной пятницы!

Hubs: