我正在尝试在右侧创建一个粘性侧边栏。
听起来在 bootstrap 中实现此行为的正确方法是使用 affix 类。我正在从事的元素正在使用 bootstrap 3。
有问题的侧边栏将驻留在 Bootstrap 中 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 上格式化代码 - 抱歉弄乱了代码缩进
最佳答案
这是一种方法:
由于 .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-->尝试调整浏览器的大小，您会看到宽度的差异(检查元素的值)。希望这会有所帮助。
关于css - 词缀破坏了 bootstrap 的嵌套网格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51640158/