gpt4 book ai didi

html - Bootstrap SImple Sidebar - 下面的内容重叠

转载 作者:太空宇宙 更新时间:2023-11-04 09:52:30 25 4
gpt4 key购买 nike

我正在使用边栏模板 ( https://startbootstrap.com/template-overviews/simple-sidebar/ ),我想要边栏下方的一些内容和边栏右侧的内容。它工作正常,但是当我调整窗口大小时,下面的内容重叠并一直到顶部。

我有这样的东西:

<div id="wrapper">

<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Start Bootstrap
</a>
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->

<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<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>
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->

</div>

<!-- /#wrapper -->
<div id="content-below">

</div>

我应该将“content-below”容器放在哪里,以防止它在调整大小后一直到顶部?

最佳答案

只需在 css 中注释掉以下部分:

#page-content-wrapper {
width: 100%;
/* position: absolute; */
padding: 15px;
}

看这里的例子codepen

享受..:)

关于html - Bootstrap SImple Sidebar - 下面的内容重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38994791/

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