【发布时间】：2020-09-30 06:50:48
【问题描述】：
基本上，我的引导垂直导航栏有一个从其右侧一直延伸到页面右侧的边距。
这就是我的垂直导航栏的样子，只有它在页面上，没有任何其他内容。 但是，当我在页面上添加另一个元素时，它会将其向下推，如下图所示，黑框正在被向下推。以红色突出显示的是导航栏创建的边距。
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous">
<link rel = "stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?
family=Montserrat:wght@100;200;300;400;500&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/2d7a97658d.js" crossorigin="anonymous"></script>
<title>Hello, world!</title>
</head>
<body>
<ul class="nav flex-column">
<div class = "section-1">
<div class = "nav-title"><i class="fas fa-user icon"></i>User</div>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Settings <i class="fas fa-angle-right
arrow"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Notifications</a>
</li>
</div>
<div class = "nav-title"><i class="fas fa-wallet icon"></i>Billing</div>
<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 class = "info-box">
Hello
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-
DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
</body>
</html>
.flex-column, .nav {width: 25%;
background-color: #f4f4f8;
height: 100vh;
margin-right: 0 !important;}
.nav-title {display: block;
padding: .5rem 1rem;
font-size: 1.2em;
font-family: 'Montserrat';}
a {text-decoration: none !important;
color: rgba(0, 0, 0, 0.6);
list-style: none;}
.nav-link {padding-left: 2em !important;
font-size: 1.1em ;
transition:color 0.2s, background-color 0.4s, padding 0.4s;
}
.nav-link:link {padding-left: 1em !important;
font-size: 1.1em;
}
.nav-link:hover {
padding-left: 1.5em !important;
font-size: 1.1em;
background-color: #f0f0f4;
}
.nav-link {padding-left: 1em !important;
font-size: 1.1em ;
transition:color 0.2s, background-color 0.4s, padding 0.4s;
}
.nav-link:link {padding-left: 1em !important;
font-size: 1.1em;
}
.nav-link:hover {
padding-left: 1.5em !important;
font-size: 1.1em;
background-color: #f0f0f4;
color: #009dff !important;
}
.active {
padding-left: 1.5em !important;
font-size: 1.1em!important;
background-color: #f0f0f4!important;
color: #009dff!important;}
.active:link {
padding-left: 1.5em !important;
font-size: 1.1em!important;
background-color: #f0f0f4!important;
color: #009dff!important;}
.active;hover {
padding-left: 1.5em !important;
font-size: 1.1em!important;
background-color: #f0f0f4!important;
color: #009dff!important;}
.arrow {
margin-left:65%;
display: flex;
margin-top: none !important;}
.icon {margin: auto 0.1em;}
.info-box {width: 5em;
height: 10em;
margin-top: 0.2em;
margin-right: auto;
margin-left: auto;
background-color: black;
display: block;}
https://codepen.io/smallbluecactus/pen/YzqbQjX
一定要把它放到你的代码编辑器中，因为它在 codepen 上看起来不一样。
【问题讨论】：