时间戳

首页 > 解决方案 > 加载引导程序 4 css 时，侧边栏导航折叠显示空白屏幕

javascript - 加载引导程序 4 css 时，侧边栏导航折叠显示空白屏幕

问题描述

我正在尝试用折叠来做侧面导航栏。这样我就包含了jquery 3.4.1和 CSS。但是当Bootstrap 4 css和Bootstrap js添加的页面变成白屏时。在控制台中不会有错误。删除引导程序后，它工作正常。但是引导程序是必不可少的。这样JS、CSS、JSP都已经收录，供大家参考。请帮助我。

$(document).ready(function(){
$(".hamburger").click(function(){
  $(".wrapper").toggleClass("collapse");

});
});
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700&display=swap');

*{
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
}
body{
  background: #e1ecf2;
}
.wrapper{
  margin: 10px;
}
.wrapper .top_navbar{
  width:84%;
  height: 60px;
  display: flex;
  position: fixed;
  top: 10px;
   transition: all 0.3s ease;
}
.wrapper.collapse .top_navbar{
  width: 92.5%;
  height: 60px;
  display: flex;
  position: fixed;
  top: 10px;
}

.wrapper .top_navbar .hamburger{
  width: 70px;
  height: 100%;
  background: #33AAAA;
  padding: 25px 25px;
  /* border-top-left-radius: 20px; */
  cursor: pointer;
}

.wrapper . .hamburger div{
  width: 35px;
  height: 4px;
  background: #92a6e2;
  margin: 5px 0;
  border-radius: 5px;
}

.wrapper .top_navbar .top_menu{
  width: 100%;
  height: 100%;
  background: linear-gradient(to right,#33AAAA,#80C477);
 /*  border-top-right-radius: 20px; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}

.wrapper .top_navbar .top_menu .logo{
  color: white;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 3px;
}

.wrapper .top_navbar .top_menu ul{
  display: flex;
}

.wrapper .top_navbar .top_menu ul li a{
  display: block;
  margin: 0 10px;
  width: 35px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  border: 1px solid white;
  border-radius: 50%;
  color: white;
}

.wrapper .top_navbar .top_menu ul li a:hover{
  background: #4360b5;
  color: #fff;
}

.wrapper .top_navbar .top_menu ul li a:hover i{
  color: #fff;
}

.wrapper .sidebar{
  position: fixed;
  left: 10px;
  background:  linear-gradient(#80C477,#33AAAA);;
  width: 200px;
  height: calc(100% - 20px);
  /* border-bottom-left-radius: 20px; */
  transition: all 0.3s ease;
  margin-top: -60px
}

.wrapper .sidebar ul li a{
    display: block;
    padding: 20px;
    color: #fff;
    position: relative;
    margin-bottom: 1px;
    color: white;
    white-space: nowrap;
}

.wrapper .sidebar ul li a:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: #92a6e2;
  display: none;
}

.wrapper .sidebar ul li a span.icon{
  margin-right: 10px;
  display: inline-block;
}

.wrapper .sidebar ul li a span.title{
  display: inline-block;
}

.wrapper .sidebar ul li a:hover,
.wrapper .sidebar ul li a.active{
  background: #4360b5;
  color: #fff;
}

.wrapper .sidebar ul li a:hover:before,
.wrapper .sidebar ul li a.active:before{
  display: block;
}

.wrapper .main_container{
  width: (100% - 200px);
  margin-top: 70px;
  margin-left: 200px;
  padding: 15px;
  transition: all 0.3s ease;
    
}

.wrapper .main_container .item{
  background: #fff;
  margin-bottom: 10px;
  padding: 15px;
  font-size: 14px;
  line-height: 22px;
}

.wrapper.collapse .sidebar{
  width: 70px;
}

.wrapper.collapse .sidebar ul li a{
  text-align: center; 
}

.wrapper.collapse .sidebar ul li a span.icon{
  margin: 0;
}

.wrapper.collapse .sidebar ul li a span.title{
  display: none;
}

.wrapper.collapse .main_container{
  width: (100% - 70px);
  margin-left: 70px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title>Responsive Side Navigation Bar</title>
 <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 
   
<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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="../css/Side.css">
<script src="../Scripts/fontawsome.js"></script>
<link rel="stylesheet" href="../css/dataTables.min.css">
<script type="text/javascript" src="../Scripts/dataTables.min.js"></script>

</head>
<body>
	
	<div class="wrapper">


		<div class="sidebar" >

			<ul>
				<li>
				<li>
				<li><a href="#"> <span class="icon"><i
							class="fas fa-book"></i></span> <span class="title">Books</span></a></li>
				<li><a href="#"> <span class="icon"><i
							class="fas fa-file-video"></i></span> <span class="title">Movies</span>
				</a></li>
				<li><a href="#"> <span class="icon"><i
							class="fas fa-volleyball-ball"></i></span> <span class="title">Sports</span>
				</a></li>
				<li><a href="#" class="active"> <span class="icon"><i
							class="fas fa-blog"></i></span> <span class="title">Blogs</span>
				</a></li>
				<li><a href="#"> <span class="icon"><i
							class="fas fa-leaf"></i></span> <span class="title">Nature</span>
				</a></li>
			</ul>
		</div>

		<div class="main_container">
			<div class="top_navbar" >
				<div class="hamburger" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
					<i class="fas fa-bars"></i>
				</div>
				<div class="top_menu">
					<div class="logo">logo</div>
					<ul>
						<li><a href="#"> <i class="fas fa-search"></i></a></li>
						<li><a href="#"> <i class="fas fa-bell"></i>
						</a></li>
						<li><a href="#"> <i class="fas fa-user"></i>
						</a></li>
					</ul>
				</div>
			</div>
			<div id ="Home">
				<jsp:include page="Home.jsp"/>
					</div>
					
				</div>
		</div>
</body>
</html>

如果添加了以下行，则会出现问题

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

我试过没有引导 css 它工作正常。但引导 css 是必不可少的。

标签： javascripthtmlcssjspbootstrap-4

解决方案

按此顺序放置您的脚本，不要忘记将重要规则放入您的 css，这可能会覆盖某些默认引导 css

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="../css/dataTables.min.css">
<script type="text/javascript" src="../Scripts/dataTables.min.js"></script>
<link rel="stylesheet" href="../css/Side.css">
<script src="../Scripts/fontawsome.js"></script>

推荐阅读