我正在尝试制作此网页中的菜单:https://socialyte.codeplus.it/wall.html
问题是，如果我的导航栏放position: fixed 一切都损坏了，我该如何解决？
这是我的 HTML:
<div class="container-fluid row p-0 m-0">
<div class="col-2 bg-black sidebar">
</div>
<div class="col-10 p-0 m-0 body">
<nav class="navbar navbar-dark inline">
<ul class="d-flex navbar-custom navbar-nav mr-auto d-inline">
<li class="nav-item active">
<a class="nav-link" href="#">Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Perfil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Publicar</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Cerrar Sesión</a>
</li>
</ul>
</nav>
<div class="col-md-10 offset-1">
<div class="card mt-3 border-0 rounded-0">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">
Some quick example text to build on the card title
and make up the bulk of the card's content.
</p>
<a href="#!" class="card-link">Card link</a>
<a href="#!" class="card-link">Another link</a>
</div>
</div>
<div class="card mt-3 border-0 rounded-0">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">
Some quick example text to build on the card title
and make up the bulk of the card's content.
</p>
<a href="#!" class="card-link">Card link</a>
<a href="#!" class="card-link">Another link</a>
</div>
</div>
<div class="card mt-3 border-0 rounded-0">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">
Some quick example text to build on the card title
and make up the bulk of the card's content.
</p>
<a href="#!" class="card-link">Card link</a>
<a href="#!" class="card-link">Another link</a>
</div>
</div>
<div class="card mt-3 border-0 rounded-0">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">
Some quick example text to build on the card title
and make up the bulk of the card's content.
</p>
<a href="#!" class="card-link">Card link</a>
<a href="#!" class="card-link">Another link</a>
</div>
</div>
<div class="card mt-3 border-0 rounded-0">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">
Some quick example text to build on the card title
and make up the bulk of the card's content.
</p>
<a href="#!" class="card-link">Card link</a>
<a href="#!" class="card-link">Another link</a>
</div>
</div>
<div class="card mt-3 border-0 rounded-0">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">
Some quick example text to build on the card title
and make up the bulk of the card's content.
</p>
<a href="#!" class="card-link">Card link</a>
<a href="#!" class="card-link">Another link</a>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
这是我的 CSS:
.body {
background-color: #EDF1F5;
margin-left: 16.69%!important;
}
.sidebar {
background: #ffffff;
box-shadow: 1px 0px 20px rgba(0, 0, 0, 0.08);
height: 100%;
position: fixed;
z-index: 1;
}
.navbar .navbar-custom{
justify-content: space-around;
align-items: center;
flex-direction: row;
width: 100%;
}
nav {
background-color: #4F5467;
}
最佳答案
这可能会让您走上正轨。您仍然需要调整正文和侧边栏类的宽度。请注意，我添加了一个简单的问候只是为了在侧边栏中看到一些东西。 * 编辑此外，将您的导航元素从具有 body 类的元素中取出。
https://codepen.io/anon/pen/xjENLm
这对您来说可能更容易玩。它正在使用 Bootstrap 。
.body {
background-color: #EDF1F5;
margin-left: 16.69%!important;
margin-top: 65px;
}
.sidebar {
background: #ffffff;
box-shadow: 1px 0px 20px rgba(0, 0, 0, 0.08);
height: 100%;
position: fixed;
z-index: 99;
}
.navbar .navbar-custom{
min-height: 50px;
background: #4F5467;
font-size: 14px;
position: fixed;
top: 0;
width: 100%;
z-index: 9;
}
nav {
background-color: #4F5467;
}
.card-container {
margin-top: 180px;
}<div class="container-fluid row p-0 m-0">
<div class="col-2 bg-black sidebar">
hello
</div>
<nav class="navbar navbar-dark inline">
<ul class="d-flex navbar-custom navbar-nav mr-auto d-inline">
<li class="nav-item active">
<a class="nav-link" href="#">Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Perfil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Publicar</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Cerrar Sesión</a>
</li>
</ul>
</nav>
<div class="col-10 p-0 m-0 body">
<div class="col-md-10 offset-1 card-container">
<div class="card mt-3 border-0 rounded-0">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">
Some quick example text to build on the card title
and make up the bulk of the card's content.
</p>
<a href="#!" class="card-link">Card link</a>
<a href="#!" class="card-link">Another link</a>
</div>
</div>
<div class="card mt-3 border-0 rounded-0">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">
Some quick example text to build on the card title
and make up the bulk of the card's content.
</p>
<a href="#!" class="card-link">Card link</a>
<a href="#!" class="card-link">Another link</a>
</div>
</div>
<div class="card mt-3 border-0 rounded-0">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">
Some quick example text to build on the card title
and make up the bulk of the card's content.
</p>
<a href="#!" class="card-link">Card link</a>
<a href="#!" class="card-link">Another link</a>
</div>
</div>
<div class="card mt-3 border-0 rounded-0">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">
Some quick example text to build on the card title
and make up the bulk of the card's content.
</p>
<a href="#!" class="card-link">Card link</a>
<a href="#!" class="card-link">Another link</a>
</div>
</div>
<div class="card mt-3 border-0 rounded-0">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">
Some quick example text to build on the card title
and make up the bulk of the card's content.
</p>
<a href="#!" class="card-link">Card link</a>
<a href="#!" class="card-link">Another link</a>
</div>
</div>
<div class="card mt-3 border-0 rounded-0">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">
Some quick example text to build on the card title
and make up the bulk of the card's content.
</p>
<a href="#!" class="card-link">Card link</a>
<a href="#!" class="card-link">Another link</a>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>关于html - 如何在不破坏一切的情况下将导航栏固定并在右侧设置菜单？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50053005/