.navbar.navbar-expand-lg.navbar-light.bg-light{
width:1920px;
background-color:#eee;
height:50px;
}
footer{
background-color:grey;
}
@media screen and (min-width:320px){
.navbar.navbar-expand-lg.navbar-light.bg-light{
width:100%;
}
}
@media screen and (min-width:985px){
#tog{
height:50px;
}
} <div class="container-fluid">
<div class="row">
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="tog" role="navigation">
<div class="navbar-header">
<a id="x" class="navbar-brand" href="http://disputebills.com">
<img style="padding-bottom:75px; " id="image;" src="assets/logo.png" alt=" x">MANAGEMENT SYSTEM
</a>
</div>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon" id="but"></span>
</button>
<div class="collapse navbar-collapse justify-content-between" id="collapsibleNavbar">
<div class="col-2"></div>
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" routerLink="/table">Details
</a>
</li>
<li class="nav-item active">
<a class="nav-link" routerLink="/assigned-employees">Employees</a>
</li>
<li class="nav-item active ">
<a class="nav-link" routerLink="/bug-reporting">Report</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="container-fluid">
<div class="row">
<footer id="footer" role="contentinfo">
<div class="container-fluid">
<div class="row footer-list-row">
<div class="col-sm-6">
<div class="row">
<div class="col-xs-6" id="com">
<h3>Company</h3>
<ul>
<li>
<a href=''>About</a>
</li>
<li>
<a href=''>News</a>
</li>
<li>
<a href=''>Careers</a>
</li>
</ul>
</div>
<div class="col-xs-6" id="sol">
<h3>Solutions</h3>
<ul>
<li>
<a href=''>Applications</a>
</li>
<li>
<a href=''>Planning</a>
</li>
<li>
<a href=''>Service</a>
</li>
<li>
<a href=''>Management</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-xs-6" id="part">
<h3>Part</h3>
<ul>
<li>
<a href=''>Partner</a>
</li>
<li>
<a href=''>Partner</a>
</li>
<li>
<a href=''>Login</a>
</li>
</ul>
</div>
<div class="col-xs-6" id="contact">
<h3>Contact Us</h3>
<ul>
<li>
<a href=''>Contact Us</a>
</li>
<li>
<a href=''>Addresses</a>
</li>
<li>
<a href=''>Feedback</a>
</li>
<li>
<a href=''>Login</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</footer>
</div>
</div>
我在我的网络应用程序中实现了bootstrap 4导航栏。由于它比我预期的要高一点，我需要将其高度自定义为50px。在我进行自定义后不久，移动视图就表明存在恶意行为。当我尝试通过单击＆＃34;列表图标＆＃34;来扩展菜单时它扩展了其他DIV下面的列表，如跟随（就像它有z索引-1）
这是我用于导航栏的HTML代码
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="tog" role="navigation" style="width:1920px; height:50px;">
<div class="navbar-header">
<a id="x" class="navbar-brand" href="http://disputebills.com">
<img style="padding-bottom:75px; " id="image;" src="assets/logo.png" alt="Dispute Bills">ATTENDENCE MANAGEMENT SYSTEM
</a>
</div>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon" id="but"></span>
</button>
<div class="collapse navbar-collapse justify-content-between" id="collapsibleNavbar">
<div class="col-2"></div>
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" routerLink="/table">My Details
</a>
</li>
<li class="nav-item active">
<a class="nav-link" routerLink="/assigned-employees">Assigned Employees List</a>
</li>
<li class="nav-item active ">
<a class="nav-link" routerLink="/bug-reporting">Report Bugs</a>
</li>
</ul>
</div>
</nav>
我试过改变z-index。但它对我没有用。有任何线索请