如何在bootstrap 4中只让中央面板滚动，而让导航栏和侧边栏保持在固定的位置？
如何在bootstrap 4中只让中央面板滚动，而让导航栏和侧边栏保持在固定的位置？
提问于 2020-11-09 16:09:59
我正在寻找如何使用bootstrap 4实现以下布局的建议：
我在stackoverflow上见过很多有类似想法的例子，但找不到如何只让中央面板可滚动。我需要类似这样的东西：https://www.codeply.com/go/woeJ9JxCQn但是，这个布局的问题是整个页面都是可滚动的，我需要使中心面板始终等于窗口高度，并使里面的内容可滚动，这样滚动就像在样机上一样。有人能提出解决方案吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-11-10 03:23:37
你可以采取几种方法。一种方法是将导航栏设置为粘性的，而不是固定的。然后删除正文填充，并在侧边栏和内容区域设置适当的高度和溢出。
https://codeply.com/p/uKyx1izF6Q
<div class="container-fluid sticky-top bg-dark shadow">
<div class="row collapse show no-gutters d-flex h-100 position-relative">
<div class="col-3 px-0 w-sidebar navbar-collapse collapse d-none d-md-flex">
<!-- spacer col -->
<a href="#" class="navbar-brand">Brand</a>
</div>
<div class="col px-3 px-md-0 py-3">
<div class="d-flex">
<!-- toggler -->
<a data-toggle="collapse" href="#" data-target=".collapse" role="button" class="">
<i class="fa fa-bars fa-lg"></i>
</a>
<a href="#" class="ml-auto text-white"><i class="fa fa-cog"></i></a>
</div>
</div>
</div>
</div>
<div class="container-fluid px-0">
<div class="row vh-100 collapse show no-gutters d-flex h-100 position-relative align-items-start">
<div class="col-3 p-0 min-vh-100 text-white w-sidebar navbar-collapse collapse d-none d-md-flex sidebar">
<!-- fixed sidebar -->
<div class="navbar-dark bg-dark position-fixed h-100 w-sidebar">
<h6 class="px-3 pt-3">Fixed Menu</h6>
<ul class="nav flex-column flex-nowrap text-truncate">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
<div class="col p-3 overflow-auto h-100">
<h3>Content..</h3>
</div>
</div>
</div>Stack Overflow用户
发布于 2020-11-09 16:49:28
你可以给侧面导航和顶部导航一个固定的位置。然后为内容面板设置上边距(等于top-nav高度)和左边距(等于side-nav width)。然后，将只在内容中滚动。别忘了给侧杆100%或100vh的高度，这样它就不会伸展。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64747859
复制相关文章
相似问题
腾讯云开发者
