我有高度定制的引导 4 导航栏组件，当我在小屏幕上单击导航栏切换按钮时它不起作用，但是，在控制台中它显示标记更改，就好像它正在工作一样，我试图增加 z-index，检查显示，检查可见性但没有效果。
这是页面的链接：https://aboshalby2017.000webhostapp.com/
这是 HTML 代码：
<head>
<!--important meta-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Mahmoud M.</title>
<!--css files-->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/fontawesome-all.min.css">
<link rel="stylesheet" href="css/main.css">
<!--site icon-->
<link rel="icon" href="images/icon.ico">
<!--google fonts-->
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
</head>
<!--start navbar-->
<nav class="navbar navbar-expand-md p-0 flex-wrap align-items-start">
<!--the brand name-->
<div class="navbar-brand text-center bg-white m-0 w-100">
<h2 class="text-capitalize">mahmoud m.</h2>
<span class="float-right">web designer</span>
<div class="clearfix"></div>
</div>
<!--toggler button-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<!--togglable content-->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-0 row no-gutters list-unstyled w-100 h-100 align-items-center">
<li data-class=".home" class="w-100 nav-item col-xl-12 col-auto text-right active">home</li>
<li data-class=".works" class="w-100 nav-item col-xl-12 col-auto text-right">works</li>
<li data-class=".about" class="w-100 nav-item col-xl-12 col-auto text-right">about</li>
<li data-class=".services" class="w-100 nav-item col-xl-12 col-auto text-right">services</li>
<li data-class=".contact" class="w-100 nav-item col-xl-12 col-auto text-right">contact</li>
</ul>
</div>
<!--the footer of sidebar-->
<footer class="text-center d-none d-xl-block">
<div class="copyright text-center">
<p class="text-capitalize">
all copyright reserved <br> © 2018 <br>
<span>mahmoud mostafa</span>
</p>
</div>
<div class="social">
<ul class="list-unstyled text-center">
<li class="d-inline-block"><a href="https://www.upwork.com/o/profiles/users/_~01f0908562a25e2c90/" target="_blank" class="d-block"><img class="upwork-green d-block w-100 h-100 rounded-circle" src="images/upwork-green.png" alt=""></a>
</li>
<li class="d-inline-block"><a href="https://github.com/drMahmoudMostafa" target="_blank" class="d-block"><i class="fab fa-github w-100 h-100 d-block"></i></a>
</li>
<li class="d-inline-block"><a href="https://plus.google.com/116765594008435589298" target="_blank" class="d-block"><i class="fab fa-google-plus w-100 h-100 d-block"></i></a>
</li>
<li class="d-inline-block"><a href="https://www.linkedin.com/in/mahmoud-mostafa-b1508a160/" target="_blank" class="d-block"><i class="fab fa-linkedin w-100 h-100 d-block"></i></a>
</li>
</ul>
</div>
</footer>
</nav>
<!--endart navbar-->
<!--js files-->
<!-- 1- jQuery -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- 2- popper -->
<script src="js/popper.min.js"></script>
<!-- 3- bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!-- 4- nicescroll -->
<script src="js/jquery.nicescroll.min.js"></script>
<!-- 5- main js file -->
<script src="js/main.js"></script>
这是SCSS代码：
@import "bootstrap/functions";
@import "bootstrap/variables";
@import "bootstrap/breakpoints";
/****************************************************
navebar section
****************************************************/
.navbar {
background: $mainColor1;
width: 20%;
top: 0;
left: 0;
bottom: 0;
box-shadow: 5px -.0009px 20px #000;
font-family: "opan-sans", sans-serif;
position: fixed;
z-index: 9000;
@include media-breakpoint-down(lg) {
width: 100%;
bottom: auto;
right: 0;
min-height: 40px !important;
height: 80px !important;
overflow: hidden;
}
.navbar-brand {
color: #333;
padding: 40px 30px;
font-family: 'Pacifico', cursive;
span {
margin-bottom: 20px;
color: $mainColor4;
}
@include media-breakpoint-down(lg) {
width: 30% !important;
padding: 10px;
display: inline-block;
span {
margin: 0;
}
}
@include media-breakpoint-down(sm) {
width: 50% !important;
}
}
.navbar-toggler {
border-color: #fff;
margin: 14px 22px;
i {
color: #fff;
width: 44px;
height: 44px;
font-size: 190%;
line-height: 30px;
padding: 5px;
}
}
.navbar-collapse {
flex-basis: auto;
@include media-breakpoint-down(lg) {
display: inline-block;
float: right;
width: 70% !important;
height: 100%;
}
@include media-breakpoint-down(sm) {
width: 100% !important;
float: none;
height: auto !important;
}
ul {
@include media-breakpoint-down( lg) {
display: inline-flex;
margin: 0;
justify-content: flex-end;
}
li {
background: linear-gradient(#323b3f, #2e3639);
color: lighten( $mainColor4, 20%);
padding: 10px 25px;
cursor: pointer;
@include transition (.1s);
&:hover {
background: $mainColor2;
color: #fff;
padding-right: 30px
}
@include media-breakpoint-down( lg) {
height: 100%;
padding: 25px 20px;
text-align: center !important;
width: auto !important;
display: inline-block;
}
@include media-breakpoint-down(sm){
height: auto;
width: 100% !important;
display: block;
}
}
.active {
background: $mainColor2;
color: #fff;
padding-right: 30px
}
}
}
footer {
font-size: 15px;
color: $mainColor4;
margin-top: 100px;
@include media-breakpoint-down(lg) {
display: none;
}
.copyright {
span {
color: $mainColor2;
}
}
}
}
无论如何谢谢;
问题是你有
@media (max-width: 1199px)
.navbar {
width: 100%;
bottom: auto;
right: 0;
min-height: 40px !important;
height: 80px !important;
overflow: hidden; /* remove this */
}
}
从.navbar中删除overflow:hidden，您的代码将正常工作。它仍然需要 更多的定制 ，例如你有 @media (max-width: 1199px)
.navbar .navbar-collapse { display:inline-block } .您需要将display:none用于移动设备。
，您需要在移动设备上更改navbar及其组件的样式。
从 3 到 4 引导时我遇到了类似的问题，标记存在，但我没有看到模态。我发现了问题
<div class="modal post fade in" id="modalForm" tabindex="-1" role="dialog" aria-hidden="false" style="display: block;"></div>
类具有属性
.fade {
opacity: 0;
}
我将不透明度从 0 更改为 1
.fade {
opacity: 1;
}
它对我有用