Twitter bootstrap 3: Navbar меняет ширину при срабатывании аффикса

Ну, у меня есть любопытная проблема, связанная с приложением bootstrap-3 script. Вы можете увидеть проблему в этом fiddle. Увеличьте рамку результатов горизонтально и прокрутите вниз, чтобы аффикс был уволен. Как вы можете видеть, навигационная панель увеличивается с правой стороны, и я действительно не вижу причин для этого эффекта. Я временно решил проблему, добавив

 .container
{
padding-left: 0px;
padding-right: 0px;
}

в css. Но, как вы можете видеть, это не очень красиво, и я не хочу удалять эти прокладки. В качестве альтернативы, я могу установить статическую ширину, например

width: 1140px;

в # nav.affix. Но это не очень отзывчиво... Я реально пробовал много подходов, но не мог получить удовлетворительных результатов. Знаете ли вы, что его вызывает?

Изменить

Хорошо, отладчик Chrome дает мне дополнительную информацию: перед запуском аффикса nav-element получил класс 'affix-top' среди других (аннотация из хром-отладчика NOT html source!):

<nav id="nav" class="navbar navbar-default affix-top" role="navigation" data-spy="affix" data-offset-top="133" style="background-color: yellow">

Любопытно, что affix-top не объявлен в HTML-коде. Тем не менее, # nav.nav.navbar.navbar-default-affix-top имеет размер как: 1140px x 52px.

После запуска прокрутки и аффикса класс 'affix-top' изменяется на 'affix' и 'affix' имеет размер: 1170px x 52px.

Это 30px, навигационная панель растет вправо. Но как я могу остановить его? Прежде всего, я не могу найти класс affix-top в любых csv файлах...

Ответ 1

Вы не можете решить это. Проблема заключается в position: fixed;. Navbar будет отображаться браузером без свойства left или right.

Вы можете решить проблему только тремя способами:

1. Используйте абсолютное позиционирование.

Используйте position: absolute; и измените значение top при прокрутке с помощью jQuery. Недостаток: для этого вам нужна часть Javascript.

2. set left/right

Установите left: ?px; или right: ?px

3. определите специальную ширину

Установите min-width: ?px; и/или max-width: ?px; для каждого медиа-запроса

Ответ 2

Это сработало для меня, когда я присвоил классу аффикса минимальную ширину 100%. Работает также с отзывчивым.

Ответ 3

Я не могу подтвердить, что

мин-ширина: 100%

работал у меня. Я решил эту проблему, используя innerWidth из родительского div. Следующий пример (включает один столбец, который, конечно, нужно помещать в контейнер и строку...):

<div class="col-sm-3 col-lg-2">
  <div class="sidebar">
    <div class="panel-heading">Some Title</div>
       <div class="panel-body">
         Some Content
       </div>
    </div>
  </div>
</div>

Следуя JS, установите свойство width при первом появлении 'affix.bs.affix'. Я также обеспечил бы изменение размеров окон, добавив обработчик к событию изменения размера:

  //Applied affix to sidebar class
  $('.sidebar').affix({
        offset: {
            top: 0
        }
    }).on('affix.bs.affix',function(){
        setAffixContainerSize();
    });

    /*Setting the width of the sidebar (I took 10px of its value which is the margin between cols in my Bootstrap CSS*/
    function setAffixContainerSize(){
        $('.sidebar').width($('.sidebar').parent().innerWidth()-10);
    }

    $(window).resize(function(){
        setAffixContainerSize();
    });

Enjoy.