Bootstrap 3.0附加列表更改宽度

时间:2013-09-08 11:45:46

标签: css twitter-bootstrap twitter-bootstrap-3 affix

我正在迁移到bootstrap 3.0.0并且我在左边有一个附加菜单时遇到问题:只要它贴上(10px滚动后),它的宽度就会改变。在this fiddle中,它变小了,在我的真实网站中,它变得更宽,并扩展了实际内容。

它与bootstrap v2.3.2完美配合。检查后,列表项似乎不适合显示的.affix {position: fixed;}

有什么想法吗?

解决方案:基于最新的评论,我最终添加了这个JS片,它可以很好地修复它,而不必为固定元素设置固定的宽度:

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

9 个答案:

答案 0 :(得分:11)

我遇到了同样的问题并解决了这个问题:

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

基本上在调整大小的情况下,我计算内容div的宽度,并将附加元素的宽度设置为。

答案 1 :(得分:8)

$(window).scroll(function () {
    $('#secondary .widget-area.affix').width($('#secondary').width());
});

答案 2 :(得分:3)

这是另一个版本:

$('.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());
});

答案 3 :(得分:3)

这是我的版本。

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

CSS

div.affix {
    position: fixed !important;
}

答案 4 :(得分:1)

曾遇到同样的问题(仅限于BS 2.3.2)。

不是答案,更像是黑客:我给了贴花元素一个宽度。这很糟糕,因为我必须为所有分辨率(RWD)设置宽度,实际上该值应该是标准列宽(例如.span4)。

是:position: fixed将元素从给定的上下文中取出(在您的情况下为col-md-3)。

答案 5 :(得分:1)

我使用此代码来修复词缀的宽度。

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

词缀获取其父级的宽度,并检查每个卷轴上的宽度。取消注释最后一行,也可以在调整大小窗口事件时执行。

答案 6 :(得分:1)

我使用了$('.affix-element').width($('.affix-element-parent').width()).affix()

运作良好:)

答案 7 :(得分:1)

我的解决方案:

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

(。菜单卡是我的粘性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);
    });
});

答案 8 :(得分:0)

这是我的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});
});