Question

我创建了一个带有下拉菜单的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>

Answer 1

您的导航列表项需要包含在<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>类的div中。

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

＆＃13;

                index   Speed   rolling_meanVal
DateTime            
1/1/2011 0:04   2165    0.057579    NaN
1/1/2011 0:07   3438    0.044646    NaN
1/1/2011 0:10   4713    0.043154    NaN
1/1/2011 0:13   6054    0.014403    NaN
1/1/2011 0:16   7385    0.038972    0.039751
1/1/2011 0:19   8734    0.019927    0.036447
1/1/2011 0:21   10045   0.039548    0.03689
1/1/2011 0:24   11374   0.089709    0.043492
1/1/2011 0:27   12661   0.102816    0.050084
1/1/2011 0:30   13960   0.119699    0.057045
1/1/2011 0:33   15261   0.095108    0.060505
1/1/2011 0:36   16579   0.051854    0.059784
1/1/2011 0:40   17848   0.035654    0.057928
1/1/2011 0:43   19163   0.083695    0.059769
1/1/2011 0:46   20458   0.091149    0.061861
1/1/2011 0:49   21784   0.082233    0.063134
1/1/2011 0:52   23105   0.043388    0.061972
1/1/2011 0:55   24415   0.032073    0.060311
1/1/2011 0:58   25689   0.108548    0.06285
1/1/2011 0:59   27117   0.140965    0.066756
1/1/2011 1:02   28492   0.029816    0.065368
1/1/2011 1:05   29861   0.028124    0.064542
1/1/2011 1:09   31195   0.042464    0.064507
1/1/2011 1:12   32471   0.065898    0.067082
1/1/2011 1:15   33793   0.128899    0.071578
1/1/2011 1:18   35094   0.019488    0.071556
1/1/2011 1:21   36407   0.041034    0.071631
1/1/2011 1:24   37728   0.038828    0.069087
1/1/2011 1:27   39053   0.039328    0.065912
1/1/2011 1:30   40340   0.080378    0.063946

＆＃13;

参考：

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

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

1 个答案: