我正在尝试在右侧创建一个粘性侧栏。
听起来像在Bootstrap中实现此行为的正确方法是使用affix类。我正在处理的项目正在使用bootstrap 3。
有问题的侧边栏将位于引导程序tabbed layout中。 应该显示粘性侧边栏的选项卡分为col-8：col-4网格。侧栏应在col-4列之内。
如果我不分配affix类，则布局看起来很好：bootply
但是，如果我分配了affix类，则侧边栏会缩小：bootply-layout-broken
我要更改的只是：
<div class="panel panel-default">
到
<div class="affix panel panel-default">
任何帮助或指点将不胜感激-非常感谢您：-）
我不确定如何在bootply上格式化代码-对错了代码缩进
答案 0 :(得分：1)
这是一种实现方法：
由于.affix.panel div是col-xs-4的一部分（暗示其父元素的 33.33333％宽度），它是.container div的一部分，如果您会看到，bootstrap.css中有一个响应宽度（基于屏幕宽度）。
因此，考虑到这一点，您必须在上下文（后缀面板）中为div设置 width 。这是我的操作方式：
$(function() {
$('div#someID .affix').width(0.33333333 * $('div.container').width());
});
window.onresize = function () {
$('div#someID .affix').width(0.33333333 * $('div.container').width());
};
一旦文档准备好，并且在每个窗口调整大小事件上，上述代码都会设置宽度。希望有道理。使用此代码段：
$(function() {
$('div#someID .affix').width(0.33333333 * $('div.container').width());
});
window.onresize = function () {
$('div#someID .affix').width(0.33333333 * $('div.container').width());
};<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div role="tabpanel" class="tab-pane active" id="someUniqueId">
<div id="someUniqueId">
<div class="row">
<div class="col-xs-8">
<div id="someUniqueId">
<div class="row">
<div class="col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<span class="panel-title">Left Side</span>
</div>
<div class="panel-body">
<div>
<table class="table table-bordered">
<tbody>
<tr class="warning">
<td>
Test Data
</td>
</tr>
<tr class="warning">
<td>
Test Data
</td>
</tr>
<tr class="warning">
<td>
Test Data
</td>
</tr>
<tr class="warning">
<td>
Test Data
</td>
</tr>
<tr class="warning">
<td>
Test Data
</td>
</tr>
<tr class="warning">
<td>
Test Data
</td>
</tr>
<tr class="warning">
<td>
Test Data
</td>
</tr>
<tr class="warning">
<td>
Test Data
</td>
</tr>
<tr class="warning">
<td>
Test Data
</td>
</tr>
<tr class="warning">
<td>
Test Data
</td>
</tr>
<tr class="warning">
<td>
Test Data
</td>
</tr>
<tr class="warning">
<td>
Test Data
</td>
</tr>
<tr class="warning">
<td>
Test Data
</td>
</tr>
<tr class="warning">
<td>
Test Data
</td>
</tr>
<tr class="warning">
<td>
Test Data
</td>
</tr>
<tr class="warning">
<td>
Test Data
</td>
</tr>
<tr class="warning">
<td>
Test Data
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div></div>
</div>
<div class="col-xs-4">
<div id="someID">
<div class="row">
<div class="col-xs-12">
<div class="affix panel panel-default">
<div class="panel-heading">
<div class="row">
<div class="col-xs-12">
<span class="panel-title">Right Side</span>
</div>
</div>
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-bordered">
<tbody>
<tr>
<td class="col-xs-12">
<div class="row">
<div class="col-xs-12">
test
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div></div>
</div>
</div>
</div>
</div>
</div>
<!--/.fluid-container-->
尝试调整浏览器的大小，您将看到宽度的差异（检查元素的值）。希望这会有所帮助。
答案 1 :(得分：0)
您可以添加css来达到相同的效果，并相应地更改宽度！
在您要保持静止的div中添加一个ID：
<div class="panel panel-default" id='stick'>
然后添加正数和宽度，以获得与词缀相同的效果
#stick{
position: fixed;
width: 18%;
}