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

Question

I am trying to do side navigation bar with collapse.我正在尝试用折叠来做侧面导航栏。 so that I have included jquery 3.4.1 and CSS.所以我已经包括jquery 3.4.1和 CSS。 But When Bootstrap 4 css and Bootstrap js added page turns into white screen.但是当Bootstrap 4 css和Bootstrap js添加页面变成白屏。 In console there will be no error.在控制台中不会有错误。 After removing bootstrap it is working fine.But bootstrap is essential.删除引导程序后，它工作正常。但是引导程序是必不可少的。 So that JS, CSS, JSP has been included for your reference.因此，已包含 JS、CSS、JSP 供您参考。 Please help me in this.请帮助我。

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

problem comes if the below line added如果添加了以下行，则会出现问题

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

I tried without bootstrap css it is working fine.But the bootstrap css is essential.我试过没有引导程序 css 它工作正常。但是引导程序 css 是必不可少的。

Answer 1

Put your scripts in this order and don't forget to put important rules to your css which might be overriding some default bootstrap css按此顺序放置脚本，不要忘记在 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>

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

问题描述

1 个解决方案

解决方案1
1 2020-04-27 09:47:25

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

问题描述

1 个解决方案

解决方案1 1 2020-04-27 09:47:25

解决方案1
1 2020-04-27 09:47:25