Fluid Bootstrap Container Not align Rows Vertically with ali

Question

我有一个基本的引导容器，它有一个流体宽度。我希望能够在侧边栏中对齐三行，分别位于顶部、中间和底部(很像引导文档中的这个演示，但作为侧边栏而不是全宽(。

从我读过的其他帖子中可以看出，这篇文章的高度是固定的，但不是流动的(即高度100%(——我需要侧边栏和内容都是页面的全高。然后在其中垂直对齐。然而，这似乎是不可能的。我想知道是否有人知道使用bootstrap来解决这个问题——这似乎是当今网络上常见的东西，肯定有办法实现它？

我还没有添加任何自定义CSS-我正在尝试使用Bootstrap中的类(但如果需要，我很乐意创建自定义类(

<div class="container-fluid h-100">
<div class="row h-100">

<div id="content" class="col-8 h-100">
<p>Some Content</p>
</div>
<div id="sidebar" class="col-4 h-100">
<div id="logo" class="row align-items-start">
<div class="col text-center">
<p>Test Top</p>
</div>
</div>
<div id="helpful-info" class="row align-items-center">
<div class="col text-center">
<p>Test Middle</p>
</div>
</div>
<div id="side-footer" class="row align-items-end">
<div class="col text-center">
<p>Test Bottom</p>
</div>
</div>
</div>

</div>
</div>

Answer 1

我认为您需要一些侧边栏部分的自定义类来保持它的位置。除此之外，您只需要将侧边栏设置为d-flex flex-column justify-content-between，并且分区应该分布在整个高度。侧边栏高度是通过计算视口高度减去导航栏高度来设置的。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
.sidebar {
position: fixed;
top: 0;
bottom: 0;
right: 0;
z-index: 100; /* Behind the navbar */
padding: 48px 0 0; /* Height of navbar */
box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.1);
}
.sidebar-sticky {
position: relative;
top: 0;
height: calc(100vh - 40px);
padding-top: 0.5rem;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}
@supports ((position: -webkit-sticky) or (position: sticky)) {
.sidebar-sticky {
position: -webkit-sticky;
position: sticky;
}
}
</style>
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0">
<a class="navbar-brand mr-0" href="#">Site name</a>
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap">
<a class="nav-link" href="#">Sign out</a>
</li>
</ul>
</nav>
<div class="container-fluid">
<div class="row">
<main class="col-8 mr-auto" style="height: 200vh;">
<h2>Content Area</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</p>

</main>
<nav class="col-4 d-block bg-light sidebar">
<div class="sidebar-sticky d-flex flex-column justify-content-between">
<div id="logo" class="row">
<div class="col text-center">
<h6>Top Section</h6>
</div>
</div>
<div id="helpful-info" class="row">
<div class="col text-center">
<h6>Middle Section</h6>
</div>
</div>
<div id="side-footer" class="row">
<div class="col text-center">
<h6>Bottom Section</h6>
</div>
</div>
</div>
</nav>
</div>
</div>