Question

我的网格中有两列。我的页面内容为col-md-3且list-group的{{1}}。我希望在滚动时跟随col-md-9，这就是list-group执行操作的地方。

不幸的是，词缀会混淆我的响应网格列的宽度。有没有其他方法可以解决这个问题，但是通过使用来自词缀库的事件来解决自己的问题？

以下是一个示例：http://jsfiddle.net/5jywokfL/

正如你所看到的那样，根据引导文档http://getbootstrap.com/javascript/#affix

，由affix导致宽度改变了。

但是，如何在保持网站响应能力的同时解决此问题呢？在移动平台上，除了平板电脑上的大屏幕外，该词缀将被完全禁用，页面将仅依赖于网格的响应性。

Answer 1

在Bootstrap的网站上，.affix是静态的，直到你想要使用它的断点，然后你修复它。您还可以在媒体查询中设置附加元素的宽度。由于他们的侧面导航器周围没有边框，你没有注意到它，但你使用的是有边框或背景的东西。

附加插件没有“问题”。位置：固定在这种情况下需要宽度。

我的解决方案使用jQuery来获取宽度以及CSS，但不是宽度在贴上，并按如下方式设置：

DEMO：http://jsbin.com/rucoti/2/

<强>的jQuery

/*! Copyright 2012, Ben Lin (http://dreamerslab.com/)
 * Licensed under the MIT License (LICENSE.txt).
 *
 * Version: 1.0.16
 *
 * Requires: jQuery >= 1.2.3
 */
(function(a){a.fn.addBack=a.fn.addBack||a.fn.andSelf;
a.fn.extend({actual:function(b,l){if(!this[b]){throw'$.actual => The jQuery method "'+b+'" you called does not exist';}var f={absolute:false,clone:false,includeMargin:false};
var i=a.extend(f,l);var e=this.eq(0);var h,j;if(i.clone===true){h=function(){var m="position: absolute !important; top: -1000 !important; ";e=e.clone().attr("style",m).appendTo("body");
};j=function(){e.remove();};}else{var g=[];var d="";var c;h=function(){c=e.parents().addBack().filter(":hidden");d+="visibility: hidden !important; display: block !important; ";
if(i.absolute===true){d+="position: absolute !important; ";}c.each(function(){var m=a(this);var n=m.attr("style");g.push(n);m.attr("style",n?n+";"+d:d);
});};j=function(){c.each(function(m){var o=a(this);var n=g[m];if(n===undefined){o.removeAttr("style");}else{o.attr("style",n);}});};}h();var k=/(outer)/.test(b)?e[b](i.includeMargin):e[b]();
j();return k;}});})(jQuery);


 $(window).on('load resize', function() {

    var colwidth = $('.col-sm-3').actual('width');

   $('.list-group-item').css('width', (colwidth) + 'px');



 });

<强> CSS

.affix.list-group {
    position: static
}
@media (max-width:767px) { 
    .affix.list-group {
        width: auto!important
    }
}
@media (min-width:768px) { 
    .affix.list-group {
        position: fixed
    }
}

<强> HTML

<div class="container">
    <div class="row">
        <div class="col-sm-3">
            <div class="list-group" data-spy="affix">
                <a href="#" class="list-group-item">An item</a>
            </div>
        </div>
        <div class="col-sm-9">
            Add a lot of text here so that you produce a scroll. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
        </div>
    </div>
</div>

Answer 2

请找到更新的fiddle

<div class="container">
    <div class="row">
        <div class="col-md-3 col-sm-3 hidden-xs">
            <div class="list-group" style="margin-top:50px" data-spy="affix">
                <a href="#" class="list-group-item">An item</a>
            </div>
        </div>
        <div class="col-md-9 col-sm-9 col-xs-12">
            Lorem ipsum.......
        </div>
    </div>
</div>

使用网格在响应式网站上添加问题

2 个答案:

DEMO：http://jsbin.com/rucoti/2/