Css 粘贴断开引导'；s嵌套网格

我试图在右手边创建一个粘性的边栏

听起来在引导中实现这种行为的正确方法是使用

affix

类。我正在做的项目是使用Bootstrap3

讨论中的边栏将位于引导程序中。 应该显示粘性侧边栏的选项卡被划分为col-8:col-4网格。侧边栏应位于col-4列中

如果我不指定

词缀

类，布局看起来很好：

但是，如果我指定

词缀

类，侧边栏的大小会缩小：

我所改变的是：

<div class="panel panel-default">

到

任何帮助或建议都将不胜感激-提前非常感谢：-）

---

我不知道如何在bootply上格式化代码-很抱歉代码缩进混乱

您可以添加css来实现同样的效果，并相应地更改宽度

在要保持静止的div中添加id：

<div class="panel panel-default" id='stick'>

---

有一种方法可以做到这一点：

作为

.affix.panel

div是

col-xs-4

的一部分（意味着33.33333%其父级的宽度），它是

.container

div的一部分，如果您看到，它在bootstrap.css中具有响应宽度（基于屏幕宽度）

因此，考虑到这一点，您必须在上下文（词缀面板）中为

div

设置宽度。我是这样做的：

$(function() {
  $('div#someID .affix').width(0.33333333 * $('div.container').width());
});

window.onresize = function () {
  $('div#someID .affix').width(0.33333333 * $('div.container').width());
};

上述代码设置文档准备就绪后的宽度，以及每次窗口调整大小事件时的宽度。希望这是有道理的。使用以下命令的代码段：

$（函数（）{
$（'div#someID.affix'）.width（0.33333333*$（'div.container'）.width（））；
});
window.onresize=函数（）{
$（'div#someID.affix'）.width（0.33333333*$（'div.container'）.width（））；
};

左侧
测试数据
测试数据
测试数据
测试数据
测试数据
测试数据
测试数据
测试数据
测试数据
测试数据
测试数据
测试数据
测试数据
测试数据
测试数据
测试数据
测试数据
右侧
#stick{
   position: fixed;
   width: 18%;
 }

$(function() {
  $('div#someID .affix').width(0.33333333 * $('div.container').width());
});

window.onresize = function () {
  $('div#someID .affix').width(0.33333333 * $('div.container').width());
};