Аффикс Bootstrap 3.0 со списком меняет ширину

Я перехожу на bootstrap 3.0.0, и у меня возникают проблемы с прикрепленным меню слева: как только оно становится прикрепленным (после прокрутки 10 пикселей), его ширина изменяется. В этой скрипке она становится меньше, на моем реальном сайте она становится шире и расширяется по фактическому содержанию.

Он отлично работал с начальной загрузкой v2.3.2. После проверки кажется, что элементы списка не очень хорошо сочетаются с появившимся .affix {position: fixed;}.

Есть идеи?

РЕШЕНИЕ: основываясь на последних комментариях, я, наконец, добавил этот фрагмент JS, который прекрасно исправляет его без необходимости устанавливать фиксированную ширину для прикрепленного элемента:

$(function() {
    var $affixElement = $('div[data-spy="affix"]');
    $affixElement.width($affixElement.parent().width());
});

css twitter-bootstrap twitter-bootstrap-3 affix
person Davor    schedule 08.09.2013    source источник
comment
На самом деле он имеет такое же поведение без списка (например, с элементами формы)   -  person Davor    schedule 08.09.2013
comment
Исправьте проблему с шириной аффикса и некоторые исправления, если кому-то интересно.   -  person Sisir    schedule 21.11.2013
comment
@Sisir очень круто, спасибо! Наконец-то я могу удалить хак из своего кода и получить правильное решение (надеюсь, они добавят его в v3.1)   -  person Davor    schedule 22.11.2013

Ответы (8)


arrow_upward
11
arrow_downward

У меня была такая же проблема, и я исправил это:

 $(window).resize(function () {
                $('#category-nav.affix').width($('#content').width());
            });

в основном в случае изменения размера я вычисляю ширину содержимого div и устанавливаю для него ширину прикрепленного элемента.

person Gokhan Demirhan    schedule 30.11.2013
comment
У меня не работает только событие изменения размера (Primefaces/Bootsfaces). Но использование события прокрутки (ниже решений) помогло. - person tak3shi; 10.01.2016

arrow_upward
3
arrow_downward

Вот еще версия:

$('.sitebar .affix-top').width($('.sitebar .affix-top').width());
$(window).resize(function () {
    $('.sitebar .affix').width($('.sitebar .affix-top').width());
});
$(window).scroll(function () {
    $('.sitebar .affix').width($('.sitebar .affix-top').width());
});
person alex_wdmg    schedule 07.10.2015

arrow_upward
3
arrow_downward

Вот моя версия.

var fixAffixWidth = function() {
  $('[data-spy="affix"]').each(function() {
    $(this).width( $(this).parent().width() );
  });
}
fixAffixWidth();
$(window).resize(fixAffixWidth);

CSS

div.affix {
    position: fixed !important;
}
person Ronald Veenbrink    schedule 20.03.2016

arrow_upward
1
arrow_downward

была такая же проблема один раз (только в BS 2.3.2).

Не ответ, а скорее хак: я присвоил прикрепленному элементу ширину. Это отстой, потому что мне нужно было установить ширину для всех разрешений (RWD), и на самом деле значение должно быть стандартной шириной столбца (например, .span4).

Да: position: fixed выводит элемент из заданного контекста (в вашем случае col-md-3).

person Frank Lämmer    schedule 13.09.2013
comment
Спасибо - это сработало, но довольно ужасный хак с множеством медиа-запросов, чтобы сделать его отзывчивым... Надеюсь, Bootstrap в какой-то момент исправит это! - person Davor; 14.09.2013

arrow_upward
1
arrow_downward

Я использую этот код, чтобы исправить ширину аффикса.

$(document).on('affixed.bs.affix',function(e){
    $('.affix').each(function(){
        var elem = $(this);
        var parentPanel = $(elem).parent();
        var resizeFn = function () {
            var parentAffixWidth = $(parentPanel).width();
            elem.width(parentAffixWidth);
        };      

        resizeFn();
        //$(window).resize(resizeFn);
    });
});

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

person Jaca Meza    schedule 30.04.2016

arrow_upward
1
arrow_downward

Я использовал $('.affix-element').width($('.affix-element-parent').width()).affix()

Работает хорошо :)

person tidelake    schedule 28.09.2016

arrow_upward
1
arrow_downward

Мое решение также:

$('.menu-card').affix();
$(document).on('affix.bs.affix', '.menu-card', function() {
    $(this).width($(this).width());
});

(.menu-card — мой липкий div)

Я добавил это для поддержки изменения размера окна:

Предположим, что аффикс находится в родительском div #menu-card-pane.

$(window).resize(function () {
    var parentSize = $('#menu-card-pane').width();
    $('.affix').each(function() {
        var affixPadding = $(this).innerWidth() - $(this).width();
        $(this).width(parentSize - affixPadding);
    });
});
person Camel    schedule 29.12.2016

arrow_upward
0
arrow_downward

Вот мой HTML

            <div class="sidebar-nav">
                <div class="navbar navbar-default" role="navigation">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#committees-navbar">
                            <span class="sr-only"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <span class="visible-xs navbar-brand">Committees</span>
                    </div>
                    <div id="committees-navbar" class="navbar-collapse collapse">
                        <ul class="nav navbar-nav nav-stacked" data-spy="affix" data-offset-top="250">
                            <li class="col-xs-12"><a ng-click="scrollTo('boardCommittee')">BOARD OF DIRECTORS</a></li>
                            <li class="col-xs-12"><a ng-click="scrollTo('madrasaCommittee')">MADRASATUL JAMALIYAH</a></li>
                            <li class="col-xs-12"><a ng-click="scrollTo('shababCommittee')">SHABAB</a></li>
                            <li class="col-xs-12"><a ng-click="scrollTo('bwaCommittee')">BURHANI WOMEN</a></li>
                            <li class="col-xs-12"><a ng-click="scrollTo('tncCommittee')">TAISEER UN NIKAH</a></li>
                            <li class="col-xs-12"><a ng-click="scrollTo('fmbCommittee')">FAIZUL MAWAIDUL BURHANIYAH</a></li>
                            <li class="col-xs-12"><a ng-click="scrollTo('websiteCommittee')">WEBSITE</a></li>
                            <li class="col-xs-12"><a ng-click="scrollTo('tadfeenCommittee')">TADFEEN</a></li>
                        </ul>
                    </div><!--/.nav-collapse -->
                </div>
            </div>

И это мое исправление JS

$(function () {
   var resize = function () {
      var sidebarNav = $(".sidebar-nav");
      var sidebarNavAffix = $(".sidebar-nav .affix");
      if (sidebarNavAffix.length && (sidebarNavAffix.width() !== sidebarNav.width())) {
             sidebarNavAffix.width(sidebarNav.width());
      }
   }

   $(window).on({"scroll" : resize, "resize" : resize});
});
person Ali Lane    schedule 02.04.2016