[英]Bootstrap Sidebar not showing on the top
我在我的网站上使用了bootsrtap模板 ,但侧栏不是从头开始,表明它向下显示了一段距离,但是内容非常完美。
<div class="container-fluid" style="margin-top:80px; min-height:500px; background-color:orange;">
<div class="row">
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Admin Panel
</a>
</li>
<li>
<a href="email_master_list/">Email Master List</a>
</li>
<li>
<a href="#">Shortcuts</a>
</li>
<li>
<a href="#">Overview</a>
</li>
<li>
<a href="#">Events</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper" style="background-color:green;">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
{% block contentarea %}
<h1>Simple Sidebar</h1>
<p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p>
<p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
<a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>
{% endblock %}
</div>
</div>
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</div> </div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
</script>
</div>
</div>
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</div>
我希望黑色边栏从顶部开始,但是在移动屏幕上,它是从顶部开始显示的。
您给了ur容器一个margin-top:80px,所以显然您的侧边栏将从下开始,尽管在计算中它将显示margin-top:0,但是如果您检查容器,它的margin-top:80px;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.