Я пытаюсь сделать боковую панель навигации с развалом. так что я включил jquery 3.4.1 и CSS. Но когда Bootstrap 4 css и Bootstrap js добавленная страница превращается в белый экран. В консоли не будет ошибки. После удаления bootstrap все работает нормально. Но bootstrap необходимо. Так что 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">
Я пробовал без bootstrap css, она работает нормально . Но bootstrap css имеет важное значение.