Bootstrap 4下拉菜单滚动而不是丢弃

问题描述 投票：1回答：1

我创建了一个带有下拉菜单的Navbar，它似乎没有删除内容，而是创建一个向下滚动菜单并在那里显示内容。我也非常感谢你的解释。

当前代码：

$(".side-toggler").click(function(){
	if ($('.hide_menu')[0]) {
    $(".sidebar").removeClass("hide_menu");
    
} else {
  $(".sidebar").addClass("hide_menu");
  
}
	
	});
html , body, a{
	color: #ffffff;
	font-family: 'Source Sans Pro', sans-serif;
}

.top-header{
	background: #3c8dbc;
}
.navbar{
	padding: 0px;
}

.navbar-brand{
	font-family: "Black Ops One", cursive;
	width: 230px;
	background-color: rgb(53,124,165);
  font-size: 27px;
  height: 50px;
}
.navbar-nav{
margin-right: 2%;
}
.navbar-brand2{
	font-family: "Black Ops One", cursive;
	font-size: 25px;

}
.navbar-brand2:hover ,.navbar-brand:hover, .side-toggler:hover{
	color: #ffffff;
	text-decoration: none;
}
.dropdown-toggle::after {
    display:none
}

.top-bar{
	background-color:rgb(53,124,165); 
	width: 100%;
	display: none;
  padding: 5px 0 5px 0;
}
.navbar-nav .nav-item i{
  font-size: 15px;
  font-weight: normal;
  

}

#nav-badge {
   position:absolute;
   right: 8px;
   top:8px;
   font-size: 10px;
   font-weight: normal;
}
#notification .nav-link .badge{
right: 10px;
}
.navbar-nav .nav-item a:hover{
  background: rgba(0,0,0,0.1);
  color: #ffffff;
}
.nav-link{
  min-width: 45px;
  padding-left: 5px; 
} 
.nav-link i{
  padding-left: 7px;
}

.navbar-nav li a {
 height: 50px;
 padding-top: 15px;
}


#user a{
display: inline-flex;
}
.top-image{
  width: 28px;
  height: 28px;
  border-radius: 50%;
  margin-top: -4px;
  
}
.top-image-name{
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 14px;
  color: #ebeff2;
  font-weight: 400;
  margin-left: 12px;
}

.side-toggle{
	margin-left: 10px;
}
@media screen and (max-width: 768px) {
    .navbar-brand {
        display: none;
    }
    .top-bar{
    	display: inline-block;
    }
    .navbar{
    	overflow-x:  hidden;
    }
    .side-toggler{
      padding-left: 8px;
    }
    

}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>

<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>



<header class="top-header">
			<div class="top-bar text-center">
        <div class="container">
        <div class="row">
          <div class="col-12">
            
        <a class="navbar-brand2" href="#">Andex-PRO</a></div></div></div>
      </div>
          <nav class="navbar navbar-expand">
  <a class="navbar-brand text-center" href="#">Andex-PRO</a>
  

<a class="side-toggler mr-auto" href="javascript:void(0);"><i class="fas fa-bars"></i></a>

  <ul class="navbar-nav ml-auto">
    
      <li class="nav-item dropdown" id="message">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <i class="far fa-envelope"></i>
              <span class="badge badge-success" id="nav-badge">4</span>
        </a>
        <div class="dropdown-menu dropdown-menu-right" 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>
      <li class="nav-item dropdown" id="notification">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <i class="far fa-bell"></i>
              <span class="badge badge-warning" id="nav-badge">8</span>
        </a>
        <div class="dropdown-menu dropdown-menu-right" 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>
      <li class="nav-item dropdown" id="flag">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <i class="far fa-flag"></i>
              <span class="badge badge-danger" id="nav-badge">2</span>
        </a>
        <div class="dropdown-menu dropdown-menu-right" 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>
</nav>
  </header>
jquery css html5 bootstrap-4
1个回答
0
投票

您的导航列表项需要使用collapse navbar-collapse类包装在div中。

这是一个有效的Bootstrap 4导航栏示例：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<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>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <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 active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</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>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

参考：

https://getbootstrap.com/docs/4.0/components/navbar/

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.