边栏和导航栏重叠

时间：2018-01-16 14:00:54

标签： html css bootstrap-4

我正在为我的项目开发一个管理面板。我做了一个侧边栏并添加了一个标准的bootstrap 4导航栏。但是有一个小问题。我的bootstrap 4导航栏显示整个页面的整个宽度，我试图使其成为列的整个宽度，因此两个导航栏都不会重叠。

以下是我想要完成的一个小小的演示：

enter image description here

使用我当前的代码，主导航栏与侧边栏重叠。我该如何解决这个问题？

＆＃13;
＆＃13; 
/* 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*/
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

提前致谢！

2 个答案:

答案 0 :(得分：0)

嘿，塞巴斯蒂安·博施！

请测试您计算机上的代码，看看这是否是您要查找的结果（堆栈溢出很难显示结果！）：

＆＃13;
＆＃13; 
.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;
  margin-left: 16.7%;
  width: 83.8%;
  z-index: -1
}

.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*/
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

要在您的网站上实现您想要的最终效果2可以做的事情： 1.-使用Z-index使导航栏位于侧边栏后面。 （会使菜单按钮看起来不合适（但可以使用填充来修复它！）） 2.-更改导航栏的边距，使其缩小以远离侧边栏 我找到的解决方案是两者的结合。

关于第153行的规则：

.navbar {
  border-top: 3px solid #283593;
  margin-left: 16.7%;
  width:83.8%;
  z-index: -1   
}
保证金左：16.7％设定保证金的百分比，使其远离侧边栏。我发现的一个问题是，在某个浏览器大小的情况下，导航栏会再次覆盖侧边栏，因为侧边栏的侧边栏尺寸略有增加，但是通过使用z-index，我们将导航栏保留在侧边栏后面。

我希望这可以帮助您保持正轨。我希望这个答案至少帮助你了解如何解决问题，如果不能完全解决问题。

度过美好的一天！

答案 1 :(得分：0)

我建议你做的第一件事是停止使用恐龙版本的Bootstrap 4，因为与beta 3（最新的）alpha 6相比，真的是一个恐龙版本。 （即使在beta 3和beta2之间也存在重大变化;幸运的是，下一个版本将是最终版本，不再引入任何重大更改。

其次，我有一个代码片段，说明如何轻松实现您想要的（使用最新版本的Bootstrap 4）。您必须根据需要调整示例。此外，蓝色导航栏出现在小屏幕上的绿色导航栏下，但我想处理它（如果需要更改）将是一个单独的问题。

以下是代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">


<div class="container">
    <div class="row">
        <div class="col-md-2 bg-success">
           <!-- sidebar -->
            <nav class="navbar navbar-light bg-success">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Link1</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link2</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link3</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link4</a>
                    </li>
                </ul>
            </nav>
        </div><!-- sidebar -->
        <div class="col-md-10">
            <div class="row">
                <div class="col-md-12 px-0">
                   <!-- navbar -->
                    <nav class="navbar navbar-expand-md navbar-light bg-primary">
                        <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 ml-auto">
                                <li class="nav-item active">
                                    <a class="nav-link" href="#">Link1</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#">Link2</a>
                                </li>
                                <li class="nav-item dropdown">
                                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        Dropdown
                                    </a>
                                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                        <a class="dropdown-item" href="#">Action</a>
                                        <a class="dropdown-item" href="#">Another action</a>
                                        <div class="dropdown-divider"></div>
                                        <a class="dropdown-item" href="#">Something else here</a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </nav>
                </div><!-- navbar -->
            </div>
            <div class="row bg-warning">
                <div class="col-md-12" style="min-height: 300px;">
                <p>content</p>
                </div><!-- content -->
            </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-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

相关问题
最新问题