我正在尝试将 Bootstrap 3 与他们的管理仪表板模板一起使用。但是，当滚动条出现后容器流体中有足够的信息时，布局会发生变化，并根据滚动条的宽度将布局的其余部分推向左侧。
有没有办法让左侧的滚动条 float 在布局的顶部？因为内容可能会频繁变化，滚动条会左右插入元素。
图 1:带有滚动条的管理仪表板模板
图 2:没有滚动条的管理仪表板
这是html代码:
<body>
<!-- Load javascripts -->
{% load staticfiles %}
<script type="text/javascript" src="{% static 'WebApp/jquery-2.1.1.min.js' %}"></script>
<script type="text/javascript" src="{% static 'WebApp/index.js' %}"></script>
<script type="text/javascript" src="{% static 'WebApp/bootstrap-3.2.0-dist/js/bootstrap.min.js' %}"></script>
<script type="text/javascript" src="{% static 'WebApp/flot/jquery.flot.js' %}"></script>
<!-- Top Navigation Bar -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebStats</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Dashboard</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Logout</a></li>
</ul>
<ul class="nav navbar-nav navbar-left">
<li><a href="#">Views</a></li>
<li><a href="#">Shared</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">About</a></li>
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form>
</div>
</div>
</div>
<!-- Middle Navigation Area -->
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active"><a href="#">Overview</a></li>
<li><a href="#">Reports</a></li>
<li><a href="#">Analytics</a></li>
<li><a href="#">Export</a></li>
</ul>
<ul class="nav nav-sidebar">
<li><a href="">SSF</a></li>
<li><a href="">SSX</a></li>
<li><a href="">MOW</a></li>
</ul>
<ul class="nav nav-sidebar">
<li><a href="">Question</a></li>
<li><a href="">LiveUpdate Toggle</a></li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header">Dashboard</h1>
<!-- Tab Panes -->
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#tab_1" role="tab" data-toggle="tab">Block Name 1</a></li>
<li><a href="#tab_2" role="tab" data-toggle="tab">Block Name 2</a></li>
<li><a href="#" role="tab" data-toggle="tab">Block Name 3</a></li>
<li><a href="#" role="tab" data-toggle="tab">Add Block</a></li>
</ul>
<!-- Tab Contents -->
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="tab_1">
<script type="text/javascript">
$(function() {
var sin = [],
cos = [];
for (var i = 0; i < 14; i += 0.5)
{
sin.push([i, Math.sin(i)]);
cos.push([i, Math.cos(i)]);
}
var plot = $.plot("#placeholder",
[
{ data: sin, label: "sin(x)"},
{ data: cos, label: "cos(x)"}
]
,
{
series:
{
lines:
{
show: true
},
points:
{
show: true
}
},
grid:
{
hoverable: true,
clickable: true
},
yaxis:
{
min: -1.2,
max: 1.2
}
});
$("<div id='tooltip'></div>").css({
position: "absolute",
display: "none",
border: "1px solid #fdd",
padding: "2px",
"background-color": "#fee",
opacity: 0.80
}).appendTo("body");
$("#placeholder").bind("plothover", function (event, pos, item)
{
if ($("#enablePosition:checked").length > 0)
{
var str = "(" + pos.x.toFixed(2) + ", " + pos.y.toFixed(2) + ")";
$("#hoverdata").text(str);
}
if ($("#enableTooltip:checked").length > 0)
{
if (item)
{
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
$("#tooltip").html(item.series.label + " of " + x + " = " + y)
.css({top: item.pageY+5, left: item.pageX+5})
.fadeIn(200);
}
else
{
$("#tooltip").hide();
}
}
});
$("#placeholder").bind("plotclick", function (event, pos, item)
{
if (item)
{
$("#clickdata").text(" - click point " + item.dataIndex + " in " + item.series.label);
plot.highlight(item.series, item.datapoint);
}
});
// Add the Flot version string to the footer
$("#footer").prepend("Flot " + $.plot.version + " – ");
});
</script>
<!-- Graph -->
<h2 class="sub-header">Graph
<button type="button" class="btn btn-success">Hide</button>
<button type="button" class="btn btn-success">PDF</button>
<button type="button" class="btn btn-success">CSV</button>
<button type="button" class="btn btn-success">Share</button>
<button type="button" class="btn btn-success">Config</button>
</h2>
<div id="content">
<div class="demo-container">
<div id="placeholder" class="demo-placeholder"></div>
</div>
</div>
<h2 class="sub-header">Chart
<button type="button" class="btn btn-success">Hide</button>
<button type="button" class="btn btn-success">PDF</button>
<button type="button" class="btn btn-success">CSV</button>
<button type="button" class="btn btn-success">Share</button>
<button type="button" class="btn btn-success">Config</button>
</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,001</td>
<td>Lorem</td>
<td>ipsum</td>
<td>dolor</td>
<td>sit</td>
</tr>
<tr>
<td>1,002</td>
<td>amet</td>
<td>consectetur</td>
<td>adipiscing</td>
<td>elit</td>
</tr>
<tr>
<td>1,003</td>
<td>Integer</td>
<td>nec</td>
<td>odio</td>
<td>Praesent</td>
</tr>
<tr>
<td>1,003</td>
<td>libero</td>
<td>Sed</td>
<td>cursus</td>
<td>ante</td>
</tr>
<tr>
<td>1,004</td>
<td>dapibus</td>
<td>diam</td>
<td>Sed</td>
<td>nisi</td>
</tr>
<tr>
<td>1,005</td>
<td>Nulla</td>
<td>quis</td>
<td>sem</td>
<td>at</td>
</tr>
<tr>
<td>1,006</td>
<td>nibh</td>
<td>elementum</td>
<td>imperdiet</td>
<td>Duis</td>
</tr>
<tr>
<td>1,007</td>
<td>sagittis</td>
<td>ipsum</td>
<td>Praesent</td>
<td>mauris</td>
</tr>
<tr>
<td>1,008</td>
<td>Fusce</td>
<td>nec</td>
<td>tellus</td>
<td>sed</td>
</tr>
<tr>
<td>1,009</td>
<td>augue</td>
<td>semper</td>
<td>porta</td>
<td>Mauris</td>
</tr>
<tr>
<td>1,010</td>
<td>massa</td>
<td>Vestibulum</td>
<td>lacinia</td>
<td>arcu</td>
</tr>
<tr>
<td>1,011</td>
<td>eget</td>
<td>nulla</td>
<td>Class</td>
<td>aptent</td>
</tr>
<tr>
<td>1,012</td>
<td>taciti</td>
<td>sociosqu</td>
<td>ad</td>
<td>litora</td>
</tr>
<tr>
<td>1,013</td>
<td>torquent</td>
<td>per</td>
<td>conubia</td>
<td>nostra</td>
</tr>
<tr>
<td>1,014</td>
<td>per</td>
<td>inceptos</td>
<td>himenaeos</td>
<td>Curabitur</td>
</tr>
<tr>
<td>1,015</td>
<td>sodales</td>
<td>ligula</td>
<td>in</td>
<td>libero</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="tab-pane fade in active" id="tab_2">
<p> something is here </p>
</div>
<div class="tab-pane fade in active" id="tab_3">
<p> something is here 2</p>
</div>
</div>
</div>
</div>
</div>
</body>
最佳答案
据我所知，无法在内容之上 float 浏览器 native 滚动条。
一种解决方法是始终显示滚动条。这将防止跳跃效果。你可以用简单的 css 来做到这一点:
html {
overflow-y: scroll;
}
关于html - 添加滚动条插入布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25900072/