我正在尝试按照此网页制作菜单：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;
}
答案 0 :(得分：0)
这可能会让你走上正轨。您仍然需要调整正文和侧边栏类的宽度。注意我添加了一个简单的问候，只是为了看侧边栏中的内容。 *编辑此外，将nav元素从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>
答案 1 :(得分：0)
使用sticky position top:0和z-index:99作为导航栏：
.navbar{
position: sticky;
top:0;
z-index: 99;
}
这是一个小提琴：https://jsfiddle.net/takius/de70temq/2/
或者如果您需要position: fixed，则需要在其后面为div设置margin-top：
.navbar {
position: fixed;
top: 0;
z-index: 99;
width: 100%;
}
<div class="col-md-10 offset-1" style="margin-top:70px;">