【发布时间】：2018-01-18 19:46:16
【问题描述】：
我正在为我的一个项目开发一个管理面板。我制作了一个侧边栏并添加了一个标准的 bootstrap 4 导航栏。但是有一个小问题。我的 bootstrap 4 导航栏以整个页面的全宽显示，我试图将其设置为列的全宽，这样两个导航栏就不会重叠。
这是我想要完成的一个小演示：
使用我当前的代码，主导航栏与侧边栏重叠。我该如何解决这个问题？
/* ALGEMNEEN*/
.first-container {
margin-top: 70px !important;
}
.mb-6 {
margin-bottom: 6rem;
}
.mb-3rem {
margin-bottom: 0.3rem;
}
.fa-font-size {
font-size: 26px;
}
.fa-font-24 {
font-size: 24px;
color: black;
}
.register-container {
margin-top: 20px !important;
}
.normal-container {
margin-top: 25px !important;
}
.btn-theme {
background-color: #283593 !important;
color: white;
border-radius: 3px;
cursor: pointer;
}
.btn-user-add {
position: absolute;
bottom: 0;
right: 0;
margin-right: 15px;
}
.card-block {
padding: 1.25rem;
}
.name-tag {
color: #283593 !important;
font-weight: bold;
}
.name-tag:hover {
text-decoration: none;
color: #444444 !important;
}
.title {
color: black !important;
}
.title:hover {
text-decoration: none;
color: #555555 !important;
}
#showEffect {
display: none;
}
.level {
display: flex;
align-items: center;
}
[v-cloak] {
display: none;
}
.btn-notliked {
background-color: transparent;
color: black;
outline: none;
border: none;
}
.btn-liked {
background-color: transparent;
color: #283593;
border: none;
outline: none;
cursor: pointer;
padding: 0;
}
.btn-both {
background-color: transparent;
border: none;
outline: none;
cursor: pointer;
padding: 0;
}
.card-custom {
border: none;
border-bottom: 1px solid #f1f1f0 !important;
cursor: pointer;
}
.btn-destroy {
background-color: transparent;
border: none;
color: black;
}
.btn-edit {
background-color: transparent;
border: none;
color: black;
}
.card-blue {
background-color: #21A6E2;
border-radius: 7px;
border: 0;
color: white;
}
.card-footer-blue {
background-color: #2194CA;
padding-top: 2px;
padding-bottom: 2px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
color: #a1dcf6;
}
.card-footer-blue>a {
color: #a1dcf6;
}
.card-footer-blue>a:hover {
color: white;
text-decoration: none;
}
.card-green {
background-color: #28B779;
border-radius: 5px;
border: 0;
color: white;
}
.card-footer-green {
background-color: #10A062;
padding-top: 2px;
padding-bottom: 2px;
color: #88cdaf;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.card-footer-green>a {
color: #88cdaf;
}
.card-footer-green>a:hover {
color: white;
text-decoration: none;
}
.card-purple {
background-color: #852C9A;
border-radius: 5px;
border: 0;
color: white;
}
.card-footer-purple {
background-color: #751E89;
padding-top: 2px;
padding-bottom: 2px;
color: #b46ec5;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.card-footer-purple>a {
color: #b46ec5;
}
.card-footer-purple>a:hover {
color: white;
text-decoration: none;
}
.card-yellow {
background-color: #FFB849;
border-radius: 5px;
border: 0;
color: white;
}
.card-footer-yellow {
background-color: #eba025;
padding-top: 2px;
padding-bottom: 2px;
color: white;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.card-footer-yellow>a {
color: #ffe0ad;
}
.card-footer-yellow>a:hover {
color: white;
text-decoration: none;
}
.fnt-46 {
font-size: 46px;
}
/*EINDE ALGEMEEN*/
/* NAVBAR STYLES */
.navbar {
border-top: 3px solid #283593;
}
.border-none {
border: none;
}
.navbar>ul>li>a {
color: black !important;
}
.navbar-panel .navbar-nav .nav-link {
color: black !important;
}
.nav-register-btn {
background-color: #283593;
color: #ffffff !important;
border-radius: 3px;
}
.navbar .navbar-toggler {
border: none;
color: #283593;
}
.btn-hover:hover {
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
cursor: pointer;
}
.btn-search {
background-color: #283593;
color: #FFFFFF;
cursor: pointer;
}
.nav-search {
background-color: #e3ebef;
color: #747F8B;
}
.fa-skype {
color: #283593;
}
.fa-skype:hover {
color: #00B0E8;
}
.form-inline {
width: 64%;
display: flex;
justify-content: center;
}
.form-inline #search {
width: 55%;
}
.search-input {
margin-right: 10px;
}
.sidebar {
position: fixed;
left: 0;
height: 100%;
z-index: 1000;
padding: 20px;
overflow-x: hidden;
overflow-y: auto;
background-color: #2B303C;
padding-right: 0;
padding-left: 0;
width: 100%;
}
.sidebar a {
color: #fff;
}
.sidebar a:hover {
color: lightgrey;
border-radius: 0;
}
.sidebar li:hover {
background-color: #373C47;
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}
.custom-active {
color: #333333 !important;
background-color: #f9f2f4;
border-left: 1px solid black;
}
.banner-background {
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
background-color: #373C47;
background-size: cover;
width: 100%;
margin-top: -12px;
}
.nav-pills .nav-item+.nav-item {
margin: 0;
}
.nav-pills .nav-link {
border-radius: 0;
}
.fa-lg {
margin: 6px auto;
}
/* EINDE NAVBAR STYLESS*/
/*LOGIN PAGINA*/
.login-card {
display: none;
border-radius: 7px;
}
.login-card form i.fa {
position: absolute;
top: 7px;
left: 32px;
color: #283593;
font-size: 22px;
z-index: 9999;
}
.fw-3 {
font-weight: 300;
}
.form-control-login {
position: relative;
padding-left: 45px !important;
}
/*EINDE LOGIN PAGINA*/
/*REGISTER PAGINA*/
.register-card {
display: none;
border-radius: 7px;
}
.btn-popover {
padding: 0;
float: right;
background-color: transparent;
}
.btn-popover .fa {
font-size: 20px;
}
/*EINDE REGISTER PAGINA*/
/* ALLE SCHADUWEN */
.z-depth-half {
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -3px rgba(0, 0, 0, 0.1);
}
.z-depth-1 {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}
.z-depth-1-half {
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
}
.z-depth-2 {
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}
.btn:hover {
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}
/* EINDE ALLE SCHADUWEN*/<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<div class="row">
<div class="col-md-2">
<nav class="col-sm-3 col-md-2 hidden-xs-down bg-faded sidebar z-depth-3">
<ul class="nav nav-pills flex-column">
<li class="nav-item mb-2 banner-background">
<a href="" class="nav-link text-center" style="color: white; margin-top: 10px;">
Test
</a>
</li>
<li class="nav-item mb-3rem p-2">
<a class="nav-link text-center" href="">
<i class="fa fa-dashboard fa-lg float-left mr-2"></i>
<span class="float-left">Dashboard</span>
<i class="fa fa-angle-right fa-lg float-right"></i>
</a>
</li>
<li class="nav-item mb-3rem p-2">
<a class="nav-link text-center" href="">
<i class="fa fa-desktop fa-lg float-left mr-2"></i>
<span class="float-left">Berichten</span>
<i class="fa fa-angle-right fa-lg float-right"></i>
</a>
</li>
<li class="nav-item mb-3rem p-2">
<a class="nav-link text-center" href="">
<i class="fa fa-users fa-lg float-left mr-2"></i>
<span class="float-left">Gebruikers</span>
<i class="fa fa-angle-right fa-lg float-right"></i>
</a>
</li>
<li class="nav-item mb-3rem p-2">
<a class="nav-link text-center" href="">
<i class="fa fa-comments fa-lg float-left mr-2"></i>
<span class="float-left">Reacties</span>
<i class="fa fa-angle-right fa-lg float-right"></i>
</a>
</li>
<li class="nav-item mb-3rem p-2">
<a class="nav-link text-center" href="">
<i class="fa fa-mail-reply fa-lg float-left mr-2"></i>
<span class="float-left">Terug</span>
<i class="fa fa-angle-right fa-lg float-right"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="col-md-10">
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-expand-lg navbar-light fixed-top z-depth-1 border-none" style="background-color: #ffffff">
<div class="container-fluid" style="padding-left: 0;">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a href="" class="nav-link" style="padding-left: 0;"></a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-envelope-o" style="font-size: 20px; position: relative; top: 3px;"></i>
</a>
</li>
<li class="nav-item ml-3">
<a href="" class="nav-link">
<i class="fa fa-bell-o" style="font-size: 20px; position: relative; top: 3px;"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="hidden-xs-only">John Doe</span>
</a>
<div class="dropdown-menu pull-right" aria-labelledby="navbarDropdown">
<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>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>提前致谢！
【问题讨论】：
-
因为你的导航栏的位置是固定的，left: 0 它被固定在左侧。如果您希望它从侧边栏结束的位置开始，您需要将左侧定位设置为侧边栏结束的位置。
-
@Naomi 侧边栏位于 col-md-2 中，宽度为 100%。它不能对导航栏做同样的事情，所以它是动态的吗？而不是手动设置像素宽度？
-
当然可以。如果您将侧边栏放在 col-md-2 中，然后将导航栏和内容一起放在 col-md-10 中，它应该在它旁边而不是重叠。
-
我已经这样做了，但它们仍然重叠。你可以看看上面的代码。侧边栏在 col-md-2 中，而导航栏在 col-md-10 中
标签： html css bootstrap-4