当相邻列中的内容较长时，一个引导程序4中的内容会移动

Question

Bootstrap新手，我在这里的第一篇文章。我正在尝试使用Bootstrap 4建立一个网站模板。我遇到了一个问题，当我在相邻列中添加长文本内容时，左列中的垂直导航条会向下移动。如何防止导航栏移动？它似乎试图在列中垂直居中。这两列在同一行("中间"(，分别为col-3和col-9。

body,
td,
th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: medium;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #386890;
}
.container {
width: 1500px;
margin-right: auto;
margin-left: auto;
background-color: #EEEEEE;
font-family: Arial, Helvetica, sans-serif;
margin-top: 20px;
font-size: medium;
margin-bottom: 20px;
color: #386890;
}
.col-xl-12 {
margin-top: 15px;
margin-bottom: 15px;
}
.banner {
margin-top: 15px;
margin-bottom: 15px;
}
.middle {
margin-bottom: 30px;
}
.col-xl-3 {
padding-left: 30px;
color: #386890;
}
.nav {
padding-left: 30px;
color: #386890;
}
.col-xl-9 {
width: auto;
float: left;
background-color: #FFFFFF;
height: auto;
text-align: left;
margin-left: 15px;
margin-right: 0px;
font-size: 90%;
padding: 15px;
}
.footer {
align-self: stretch;
text-align: center;
font-size: 90%;
}
.nav-pills {
text-align: center;
padding: 10px;
background-color: #EEEEEE;
clear: both;
font-size: 110%;
color: #386890;
}
.nav-pills .axtive {
background-color: #16F804;
}
.nav-pills a:hover {
color: #386890;
text-decoration: none;
font-size: 100%;
}
.nav-pills a {
color: #386890;
text-decoration: none;
font-size: 100%;
}
.nav-pills li {
list-style-type: none;
display: inline;
margin-right: 10px;
margin-left: 10px;
}
.nav-pills ul {
margin: 0px;
padding: 0px;
background-color: #EEEEEE;
font-size: 75%;
color: #386890;
}
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
color: #fff;
background-color: #ADB2BD;
}
.socialmedia {
margin: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />

<!--middle section navbar and main begin-->
<middle class="row middle" style="margin-right: 1px;">
<!--nav bar start-->
<nav class="col-xl-3 navbar navbar-expand-xl navbar-light" style="margin-right: -15px;">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main_navbar">
<span class="navbar-toggler-icon">
</span>
</button>
<div class="collapse navbar-collapse" id="main_navbar" Style="float:top">
<ul class="nav-pills nav flex-column">
<li class="nav-item"> <a class="nav-link active" href="#">Home</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">ACG Blog</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Consulting</a> </li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Multimedia</a>
<div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a> </div>
</li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">S&T Missions</a>
<div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a> </div>
</li>
<li class="nav-item"> <a class="nav-link" href="#">About Us</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li>
<li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li>
</ul>
</div>
</nav>
<!--nav bar end-->
<!--main content section start-->
<!-- TemplateBeginEditable name="EditRegion_page_content" -->
<main class="col-xl-9">
<h1>Lorem ipsum</h1> dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Molestie nunc non blandit massa. Est ullamcorper eget nulla facilisi etiam dignissim diam quis enim. Cursus eget nunc
scelerisque viverra mauris in aliquam sem. Eu ultrices vitae auctor eu augue ut lectus arcu. Ac tortor dignissim convallis aenean et tortor at risus viverra.
<p>Pharetra et ultrices neque ornare aenean euismod elementum nisi quis. Amet mattis vulputate enim nulla aliquet porttitor lacus. Sit amet facilisis magna etiam. Ut tellus elementum sagittis vitae et leo duis ut diam. Vitae suscipit tellus mauris a
diam maecenas sed enim ut. Arcu non odio euismod lacinia at quis risus sed vulputate. </p>
<h1>Lorem ipsum</h1> dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Molestie nunc non blandit massa. Est ullamcorper eget nulla facilisi etiam dignissim diam quis enim. Cursus eget nunc
scelerisque viverra mauris in aliquam sem. Eu ultrices vitae auctor eu augue ut lectus arcu. Ac tortor dignissim convallis aenean et tortor at risus viverra.
<p>Pharetra et ultrices neque ornare aenean euismod elementum nisi quis. Amet mattis vulputate enim nulla aliquet porttitor lacus. Sit amet facilisis magna etiam. Ut tellus elementum sagittis vitae et leo duis ut diam. Vitae suscipit tellus mauris a
diam maecenas sed enim ut. Arcu non odio euismod lacinia at quis risus sed vulputate. </p>
<h1>Lorem ipsum</h1> dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Molestie nunc non blandit massa. Est ullamcorper eget nulla facilisi etiam dignissim diam quis enim. Cursus eget nunc
scelerisque viverra mauris in aliquam sem. Eu ultrices vitae auctor eu augue ut lectus arcu. Ac tortor dignissim convallis aenean et tortor at risus viverra.
<p>Pharetra et ultrices neque ornare aenean euismod elementum nisi quis. Amet mattis vulputate enim nulla aliquet porttitor lacus. Sit amet facilisis magna etiam. Ut tellus elementum sagittis vitae et leo duis ut diam. Vitae suscipit tellus mauris a
diam maecenas sed enim ut. Arcu non odio euismod lacinia at quis risus sed vulputate. </p>
</main>
<!-- TemplateEndEditable -->
<!--nav bar end-->
</middle>
<!--middle section navbar and main end-->

Answer 1

问题是.navbar设置了flex属性align-items: center(BootStrap默认值(。

如果元素具有display: flex和flex-direction: row，则align-items将子元素与横轴对齐，在这种情况下，#main_navbar与垂直中心对齐。(如果flex-direction是列，则align-items:center将水平居中(。

您可以通过在.navbar元素中添加：align-items: flex-start来覆盖BootStrap的代码。

这是我在下面添加到您的代码中的内容：

.middle .navbar {
align-items: flex-start;
}

我还添加了.middle选择器，以确保它比.navbar更具体，并将覆盖BS样式。

body,
td,
th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: medium;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #386890;
}
.container {
width: 1500px;
margin-right: auto;
margin-left: auto;
background-color: #EEEEEE;
font-family: Arial, Helvetica, sans-serif;
margin-top: 20px;
font-size: medium;
margin-bottom: 20px;
color: #386890;
}
.col-xl-12 {
margin-top: 15px;
margin-bottom: 15px;
}
.banner {
margin-top: 15px;
margin-bottom: 15px;
}
.middle {
margin-bottom: 30px;
}
.col-xl-3 {
padding-left: 30px;
color: #386890;
}
.nav {
padding-left: 30px;
color: #386890;
}

/* ADDED THIS - added .middle to make sure it's more specific than BS */
.middle .navbar {
align-items: flex-start;
}
.col-xl-9 {
width: auto;
float: left;
background-color: #FFFFFF;
height: auto;
text-align: left;
margin-left: 15px;
margin-right: 0px;
font-size: 90%;
padding: 15px;
}
.footer {
align-self: stretch;
text-align: center;
font-size: 90%;
}
.nav-pills {
text-align: center;
padding: 10px;
background-color: #EEEEEE;
clear: both;
font-size: 110%;
color: #386890;
}
.nav-pills .axtive {
background-color: #16F804;
}
.nav-pills a:hover {
color: #386890;
text-decoration: none;
font-size: 100%;
}
.nav-pills a {
color: #386890;
text-decoration: none;
font-size: 100%;
}
.nav-pills li {
list-style-type: none;
display: inline;
margin-right: 10px;
margin-left: 10px;
}
.nav-pills ul {
margin: 0px;
padding: 0px;
background-color: #EEEEEE;
font-size: 75%;
color: #386890;
}
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
color: #fff;
background-color: #ADB2BD;
}
.socialmedia {
margin: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />

<!--middle section navbar and main begin-->
<middle class="row middle" style="margin-right: 1px;">
<!--nav bar start-->
<nav class="col-xl-3 navbar navbar-expand-xl navbar-light" style="margin-right: -15px;">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main_navbar">
<span class="navbar-toggler-icon">
</span>
</button>
<div class="collapse navbar-collapse" id="main_navbar" Style="float:top">
<ul class="nav-pills nav flex-column">
<li class="nav-item"> <a class="nav-link active" href="#">Home</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">ACG Blog</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Consulting</a> </li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Multimedia</a>
<div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a> </div>
</li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">S&T Missions</a>
<div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a> </div>
</li>
<li class="nav-item"> <a class="nav-link" href="#">About Us</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li>
<li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li>
</ul>
</div>
</nav>
<!--nav bar end-->
<!--main content section start-->
<!-- TemplateBeginEditable name="EditRegion_page_content" -->
<main class="col-xl-9">
<h1>Lorem ipsum</h1> dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Molestie nunc non blandit massa. Est ullamcorper eget nulla facilisi etiam dignissim diam quis enim. Cursus eget nunc
scelerisque viverra mauris in aliquam sem. Eu ultrices vitae auctor eu augue ut lectus arcu. Ac tortor dignissim convallis aenean et tortor at risus viverra.
<p>Pharetra et ultrices neque ornare aenean euismod elementum nisi quis. Amet mattis vulputate enim nulla aliquet porttitor lacus. Sit amet facilisis magna etiam. Ut tellus elementum sagittis vitae et leo duis ut diam. Vitae suscipit tellus mauris a
diam maecenas sed enim ut. Arcu non odio euismod lacinia at quis risus sed vulputate. </p>
<h1>Lorem ipsum</h1> dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Molestie nunc non blandit massa. Est ullamcorper eget nulla facilisi etiam dignissim diam quis enim. Cursus eget nunc
scelerisque viverra mauris in aliquam sem. Eu ultrices vitae auctor eu augue ut lectus arcu. Ac tortor dignissim convallis aenean et tortor at risus viverra.
<p>Pharetra et ultrices neque ornare aenean euismod elementum nisi quis. Amet mattis vulputate enim nulla aliquet porttitor lacus. Sit amet facilisis magna etiam. Ut tellus elementum sagittis vitae et leo duis ut diam. Vitae suscipit tellus mauris a
diam maecenas sed enim ut. Arcu non odio euismod lacinia at quis risus sed vulputate. </p>
<h1>Lorem ipsum</h1> dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Molestie nunc non blandit massa. Est ullamcorper eget nulla facilisi etiam dignissim diam quis enim. Cursus eget nunc
scelerisque viverra mauris in aliquam sem. Eu ultrices vitae auctor eu augue ut lectus arcu. Ac tortor dignissim convallis aenean et tortor at risus viverra.
<p>Pharetra et ultrices neque ornare aenean euismod elementum nisi quis. Amet mattis vulputate enim nulla aliquet porttitor lacus. Sit amet facilisis magna etiam. Ut tellus elementum sagittis vitae et leo duis ut diam. Vitae suscipit tellus mauris a
diam maecenas sed enim ut. Arcu non odio euismod lacinia at quis risus sed vulputate. </p>
</main>
<!-- TemplateEndEditable -->
<!--nav bar end-->
</middle>
<!--middle section navbar and main end-->