为什么我的垂直引导导航栏会破坏我的页面？
[英]Why is my Vertical Bootstrap Navbar breaking my page?
问题描述
Basically, my bootstrap vertical navbar has a margin that stretches from its right side, all the way to the right side of the page.
基本上，我的引导垂直导航栏有一个边距，从它的右侧一直延伸到页面的右侧。
This is what my Vertical Navbar looks like, with only it on the page, without any other content.这就是我的垂直导航栏的样子，页面上只有它，没有任何其他内容。 However, when I add another element on the page, it pushes it down, as shown in the image below, the black box is being pushed down.但是，当我在页面上添加另一个元素时，它会将其向下推，如下图所示，黑框被向下推。 Highlighted in red is the margin being created by the navbar.以红色突出显示的是导航栏创建的边距。
<!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 https://codepen.io/smallbluecactus/pen/YzqbQjX
Be sure to put this into ur code editor, because it looks different on codepen.一定要把它放到你的代码编辑器中，因为它在 codepen 上看起来不一样。
1 个解决方案
解决方案1
1 已采纳 2020-09-29 22:43:04
You need to put a container around the ul to tell the area spacing to become aligned.您需要在 ul 周围放置一个容器，以告诉区域间距对齐。 Right now your ul nav is flexboxed just by itself.现在你的 ul 导航是单独的 flexboxed。 Anything you try to put next to it will just go below as you need to group the nav with whatever you want to put next to it.您尝试放置在它旁边的任何内容都会在下方，因为您需要将导航与您想要放置在它旁边的任何内容进行分组。 If you inspect there's technically no margin with the nav although it looks like it.如果您检查，尽管看起来像，但导航在技术上没有余量。
<div class="d-flex"> <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> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.