Twitter bootstrap 具有流体布局的引导粘贴插件

如果我想在流体布局中使用侧边栏的粘贴插件，但侧边栏的宽度在粘贴时总是变化，响应性设计也不起作用

在引导文档中，粘贴插件未与流体布局一起使用。 也许是因为他们有同样的问题

---

有人知道怎么做吗

他们网站上粘贴的演示是响应性的，它将自己定位在页面顶部。移动设备和较小屏幕上的

位置：固定的
CSS属性不是一个可行的选项，因此无法删除功能。
必须明确设置侧边栏的宽度属性（或最小宽度）。如果您查看Andres指向的页面，“bs docs sidenav”类的显式宽度为228px

这将覆盖“.span3”类，并防止侧栏在滚动时调整大小

如果删除该显式宽度声明并滚动页面，侧边栏将调整大小，就像您在自己的页面中看到的问题一样。
对于要使用流体
span3
侧边栏的粘贴，您需要添加一些javascript来钳制宽度并管理大小调整

我只是编写了一个小javascript函数来实现这一点

检查从引导

/*
* Clamped-width. 
* Usage:
*  <div data-clampedwidth=".myParent">This long content will force clamped width</div>
*
* Author: LV
*/
$('[data-clampedwidth]').each(function () {
    var elem = $(this);
    var parentPanel = elem.data('clampedwidth');
    var resizeFn = function () {
        var sideBarNavWidth = $(parentPanel).width() - parseInt(elem.css('paddingLeft')) - parseInt(elem.css('paddingRight')) - parseInt(elem.css('marginLeft')) - parseInt(elem.css('marginRight')) - parseInt(elem.css('borderLeftWidth')) - parseInt(elem.css('borderRightWidth'));
        elem.css('width', sideBarNavWidth);
    };

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

/*
*夹紧宽度。
*用法：
*此长内容将强制固定宽度
*
*作者：吕
*/
$（'[data clampedwidth]'）。每个（函数（）{
var elem=$（本）；
var parentPanel=elem.data（'clampedwidth'）；
var resizeFn=函数（）{
var sideBarNavWidth=$（parentPanel.width（）-parseInt（elem.css（'paddingLeft'））-parseInt（elem.css（'paddingRight'））-parseInt（elem.css（'marginLeft'））-parseInt（elem.css（'borderLeftWidth'））-parseInt（elem.css（'borderRightWidth'））-parseInt（elem.css（'borderRightWidth'）；
元素css（‘宽度’、边栏宽度）；
};
resizeFn（）；
$（窗口）。调整大小（调整大小fn）；
});

$（文档）.ready（函数（）{
setTimeout（函数（）{
$（'.sidebar>*'）。粘贴({
偏移量：{
top:function（）{return$window.width（）谢谢你的回答。是的，演示是有响应的，但不是流体网格系统。这就是问题所在。@Toki完全忘记了这个问题，只是在投了反对票后才注意到你的回答：/…用流体设置测试了引导粘贴插件，它似乎与最新的引导兼容，我猜这是他们遇到的问题ixed.这里是一个演示：@Andres ilich:您指向的演示包括assets/css/docs.css，它为各种设备进行了特定的裁剪。请参见下面的`（at）media（最大宽度：767px）{.bs-docs-sidenav.affix{position:static；width:auto；top:0；}`@DiomidisSpinellis在撰写本文时，我不记得bootstrap是否有这些样式。自提出问题以来，该框架经历了许多更改和更新。但固定宽度的框架不再是流动的。优雅的解决方案，在bootstrap3中获取.container，让您能够拥有漂亮的导航ght想要注意这里的
盒子模型
声明，这是最好的解决方案。应该添加到BS库中。
$(document).ready(function () {
  setTimeout(function () {
    $('.sidebar > *').affix({
      offset: {
        top: function () { return $window.width() <= 980 ? 290 : 210 }
        , bottom: 270
      }
    })
  }, 100)
});