Twitter начальной загрузки 3: Navbar меняет ширину при срабатывании аффикса

Question

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

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

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

width: 1140px;

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

редактировать

Хорошо, отладчик Chrome дает мне дополнительную информацию: до того, как аффикс запущен, элемент nav получил класс affix-top среди прочих (аннотация от chrome-debugger НЕ от источника html!):

<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-файле...

Answer 1

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

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

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

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

2. установить влево / вправо

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

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

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

Answer 2

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

Answer 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();
    });

Наслаждаться.