Css 用网格将问题贴在响应站点上

我的网格中有两列。一个

col-md-3

，它有一个

列表组

和

col-md-9

，其中包含我的页面内容。我想在滚动时跟随

列表组

，这就是

粘贴

的地方

不幸的是，词缀弄乱了响应网格列的宽度。除了使用词缀库中的事件激发来破解自己之外，是否没有其他方法来修复此问题

以下是一个例子：

正如您所看到的，由于

位置：已修复

的原因，宽度发生了偏离路线的变化，如引导文档所示：

但我如何在保持网站响应能力的同时解决这个问题呢？在移动平台上，除平板电脑上的大屏幕外，粘贴将完全禁用，页面将仅依赖网格的响应。

请查找更新的

乱数假文。。。。。。。

在引导程序的站点上，.affix是静态的，直到您要使用它的断点，然后您将其修复。您还可以在媒体查询中设置粘贴元素的宽度。因为他们的侧导航周围没有边界，所以你不会注意到它，但你会处理有边界或背景的东西

粘贴的插件没有“问题”。位置：固定在这种情况下需要一个宽度

我的解决方案使用jQuery获得CSS的宽度，但不是粘贴的CSS上的宽度，并按如下方式进行设置：

演示： 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>  

在这里添加大量文本，以便生成一个滚动条。这是一位杰出的领袖，他是一位伟大的领袖。但是，在最低限度的利益下，我们必须在公共消费品的基础上，继续履行我们的义务。在亨德雷特的两个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里。不受时间和解决方案的限制，不受限制，不受限制，不受限制。典型的非哈本语；这通常是法律依据。调查显示莱克托雷斯·勒盖尔·勒格斯·库德·勒格特·萨皮乌斯。单簧管是一种动态的过程，是一种选择。沼泽地不属于戈蒂卡海岸，也不属于克拉拉沼泽地，而是每四分之一和五分之一海水形成的人文景观。Eodem modo typi，nobis videntur parum clari，未来的未婚妻Sollemens。

第一列的大小仍然不正确，它的宽度小于应有的宽度。。我认为这是

位置的一个词缀问题：修复了
？一切正常，但我注意到当页面被压缩在一起时，它不会返回到其响应状态，
列表组位于顶部，但它仍然位于侧面。您的标记中有X列。如果您使用col-sm，它会按预期工作：请注意jQuery也发生了变化。
<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>