Адаптивная навигационная панель Bootstrap

У меня проблема с навигационной панелью начальной загрузки с точки зрения отзывчивости. Я использовал data-spy="affix" на своей панели навигации, чтобы убедиться, что она остается фиксированной вверху при прокрутке вниз, и она работает отлично. Однако проблема заключается в том, что я изменяю размер окна на мобильный размер. Когда я изменяю размер до мобильного размера, правая часть моей панели навигации выходит за пределы. Это означает, что я не вижу содержимое, потому что моя панель навигации слишком широка для экрана. Однако, когда я прокручиваю вниз и эффект affix вступает в силу, моя панель навигации масштабируется до экрана мобильного устройства, и содержимое, выходящее за пределы экрана, идеально выравнивается для экрана мобильного устройства, и вся панель навигации будет реагировать.

Вот мой HTML-код для панели навигации:

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="0">
        <div class="navbar-header">
            <div class="navbar-brand">
              <a href="#">Title</a>
            </div>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Page1</a></li>
                <li><a href="#">Page2</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Shop</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-shopping-cart badge">5</span></a></li>
            </ul>
        </div>
    </nav>

И это мой соответствующий CSS-код:

body {
    font-size:large;
}

.glyphicon{
    font-size: 95%;
}
.affix {
    top:0px;
    width:100%;
    z-index:99999;
}
.affix + .container-fluid {
    padding-top: 6.801%;
}
.navbar-header{
    margin-left: 5% !important;
}
.navbar{
    width:100% !important;
    background-image:none;
    background-color:black;
}
.navbar div a{
    line-height:80px;
}

Также создал JSFiddle.


html css twitter-bootstrap responsive navbar
person Tom Kustermans    schedule 18.07.2016    source источник
comment
Если все, что вам нужно, это постоянно закреплять панель навигации вверху, попробуйте просто добавить класс navbar-fixed-top в панель навигации.   -  person Matthew Allen    schedule 18.07.2016
comment
Это действительно помогло. Не знаю, как я добрался до data-spy="affix". настолько глуп. Можете ли вы опубликовать это как ответ.   -  person Tom Kustermans    schedule 18.07.2016

Ответы (1)


arrow_upward
0
arrow_downward

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

@media (max-width:767px){
 .navbar div a {
    line-height: 20px;
}
.affix-top .collapse {
    display:block !important;
}
 
  
}

person Jishnu V S    schedule 18.07.2016