使用Bootstrap构建具有对齐页面内容的sidenav

Question

我有一个我想要修复的简单侧导航。根据我对bootstrap类的理解，列应该是对齐的。我的大部分页面内容的第二列最终落后于我的sidenav。在保持第一列固定的同时，如何使第二列与第一列对齐？

#logo {
  height: 40vh;
  width: 20vw; }

.dropdown-toggle, .dropdown-menu {
  width: 300px; }

.btn-group img {
  margin-right: 10px; }

.dropdown-toggle {
  padding-right: 50px; }

.dropdown-toggle .glyphicon {
  margin-left: 20px;
  margin-right: -40px; }

.dropdown-menu > li > a:hover {
  background: white; }

/* $search-blue */
.dropdown-header {
  background: #ccc;
  font-size: 14px;
  font-weight: 700;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-top: 10px;
  margin-bottom: 5px; }

#sidebar {
  min-width: 250px;
  max-width: 250px;
  height: 100vh;
  border: 1px solid pink; }

/*# sourceMappingURL=notification.css.map */

	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" style="background-color: #e0f7fa">
		<div class="d-flex flex-row" style="border:1px solid black;">
			<div class="col d-flex justify-content-start" style="border:1px solid blue;">
				<img id="logo" src="./images/logo.png">
			</div><!--logo -->
			<div class="col d-flex align-items-center justify-content-end" style="border:1px solid red;">
				<div class="btn-group">
					<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
						<img src="http://lorempixel.com/75/50/abstract/" style="border-radius: 50%;">
						0123 4567 8912 3456
						<span class="glyphicon glyphicon-chevron-down"></span>
					</button>

					<ul class="dropdown-menu">
						<li class="dropdown-header">Member name (you)</li>
						<li>
							<a href="#" title="Select this card"><img src="http://lorempixel.com/75/50/abstract/">0123 4567 8912 3456</a>
						</li>
						<li>
							<a href="#" title="Select this card"><img src="http://lorempixel.com/75/50/abstract/">0123 4567 8912 3456</a>
						</li>
						<li class="dropdown-header">Member name</li>
						<li>
							<a href="#" title="Select this card"><img src="http://lorempixel.com/75/50/abstract/">0123 4567 8912 3456</a>
						</li>
					</ul>
				</div>
			</div><!--dropdown for profile image,name and description -->
		</div>
	</div><!--container for header -->
	<div class="container-fluid" style="border: 1px solid black">
		<div class="row">
			<div class="col-4 position-fixed align-self-start">
				<nav id="sidebar">
				<!-- Sidebar Header -->
				<div class="sidebar-header">
					<h3>Notification</h3>
				</div>
					<!-- Sidebar Links -->
					<ul class="list-unstyled components">
						<li class="active"><a href="#">Edit Profile</a></li>
						<li><a href="#">Privacy & Security</a></li>
						<li><a href="#">Payment Setting</a></li>
						<li><a href="#">Transaction History</a></li>
						<li><a href="#">Trust & Verfication</a></li>
						<li><a href="#">My Education Blog</a></li>
						<li><a href="#">Promotions</a></li>
					</ul>
					<ul>Cancel Account</ul>
				</nav>
			</div>
			<div class="col-8 align-self-center">
				<h3>Send notifications via</h3>
			</div><!--this should be directly next to navbar -->
		</div>
	</div><!--container for navbar and page content -->

你可以看到我在首页中有一个标题，其中有一个图像和一个自己容器中的下拉列表。然后，我有一个带sidenav的容器，并说“获取通知”是错误的。我添加了边框，以便您可以看到所有内容的位置。