gpt4 book ai didi

html - Bootstrap 侧边栏未显示在顶部

转载 作者:行者123 更新时间:2023-11-28 08:32:16 27 4
gpt4 key购买 nike

我正在使用这个 bootsrtap template在我的网站上,但侧边栏不是从头开始,感染它显示了一段距离,但是内容是完美的。

enter image description here

<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>

我希望黑色边栏从顶部开始,但是在移动屏幕上它是从顶部开始显示的。

最佳答案

您可以将#sidebar-wrapper 放在顶部

#sidebar-wrapper{
top:0px;
}

演示: http://jsfiddle.net/bronni/caprkok4/2/

关于html - Bootstrap 侧边栏未显示在顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28209838/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com