添加滚动条会推动布局
我正在尝试将Bootstrap 3与其管理信息中心模板一起使用。但是，当滚动条出现后容器流体中有足够的信息时，布局会发生变化，并根据滚动条的宽度将布局的其余部分推向左侧。
有没有办法在左侧滚动条使其浮动在布局顶部？因为内容可能会频繁更改，滚动条会左右推送项目。
图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>
1 个答案:
答案 0 :(得分：3)
据我所知，无法在内容之上浮动浏览器本机滚动条。
解决方法可能是始终显示滚动条。这将防止麻木效应。你可以用简单的css来做到这一点：
html {
overflow-y: scroll;
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？