我有 navbar，当我单击图标时，它会在下面移动内容并且它工作正常但是当我想更改 CSS 高度时，我遇到了一个问题(下拉只是重叠 h3 文本而不是向下移动)。
这是工作 fiddle :-
随着高度( https://jsfiddle.net/kds8pe0L/6/ )正常工作
没有高度 ( https://jsfiddle.net/hkeo7fg9/ ) 这是错误
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Master thesis application</title>
<!-- Jquery -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!-- Import css file-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js"></script>
</head>
<script type="text/javascript">
</script>
<body>
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
<li><a href="/home">Clients</a></li>
<li><a href="/charts">Charts</a></li>
</ul>
@if (Sentinel::guest())
<ul class="nav navbar-nav">
<li><a href="/">Home</a></li>
</ul>
@endif
@if(!Sentinel::guest())
@if(Sentinel::inRole('admin'))
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
Admin Panel <span class="caret"></span> </a>
<ul class="dropdown-menu" role="menu">
<li><a href="/adminsProfiles">Admins List</a></li>
<li><a href="/viewersProfiles">Users List</a></li>
</ul>
</li>
</ul>
@endif
@endif
@if(!Sentinel::guest())
@if(Sentinel::inRole('viewer'))
<ul class="nav navbar-nav">
<li> <a href="{{ route('profile', ['first_name' => Sentinel::getUser()->first_name]) }}">Profile</a></li>
</ul>
@endif
@endif
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
@if (Sentinel::guest())
<li><a href="/login">Login</a></li>
<li><a href="/register">Register</a></li>
@else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{Sentinel::getUser()->first_name}} <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="{{ URL::to('/logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>
<form id="logout-form" action="{{ URL::to('/logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
@endif
</ul>
</div>
</div>
</nav>
<h2 class="text-center" >List of clients</h2>
<div class="container">
</div> <!-- /container -->
</body>
</html>
CSS
body {
background-image: url("/images/images.jpg");
}
.container {
max-width: 940px;
}
#header{
height: 120px;
background-color: #007ab3;
padding: 20px;
padding-left: 100px;
}
.navbar {
position: relative;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 0;
}
.navbar-inverse{
background-color: #004666;
}
@media (min-width: 768px){
.navbar-nav>li>a {
padding-top: 0px;
padding-bottom: 0px;
}}
.navbar-nav>li>a {
padding-top: 0px;
padding-bottom: 0px;
}
.nav>li>a {
padding: 0px;
padding-left: 10px;
padding-right:10px;
color: white;
padding-top: 3px;
font-weight: 500;
font-size: 1.2em;
}
.navbar-inverse .navbar-nav>li>a {
color: white;
}
.tablica{
float:left;
}
td{
text-align: center;
width: 10%;
}
th{
font-size: 10px;
}
.table {
width: 90%;
}
.navbar-toggle {
position: relative;
float: right;
padding: 5px 5px;
margin-top: 2px;
margin-bottom: 8px;
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.container>.navbar-header, .container-fluid>.navbar-header, .container>.navbar-collapse, .container-fluid>.navbar-collapse {
background-color: #004666;
margin-right: -15px;
margin-left: -15px;
position: relative;
float: none;
}
th{
text-align: center;
}
最佳答案
如果您使用 min-height: 30px; 而不是 height: 30px;，导航栏将按照您的预期增长。
https://jsfiddle.net/hkeo7fg9/5/
body {
background-image: url("/images/images.jpg");
}
.container {
max-width: 940px;
}
#header{
height: 120px;
background-color: #007ab3;
padding: 20px;
padding-left: 100px;
}
.navbar {
position: relative;
min-height: 30px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 0;
}
.navbar-inverse{
background-color: #004666;
}
@media (min-width: 768px){
.navbar-nav>li>a {
padding-top: 0px;
padding-bottom: 0px;
}}
.navbar-nav>li>a {
padding-top: 0px;
padding-bottom: 0px;
}
.nav>li>a {
padding: 0px;
padding-left: 10px;
padding-right:10px;
color: white;
padding-top: 3px;
font-weight: 500;
font-size: 1.2em;
}
.navbar-inverse .navbar-nav>li>a {
color: white;
}
.tablica{
float:left;
}
td{
text-align: center;
width: 10%;
}
th{
font-size: 10px;
}
.table {
width: 90%;
}
.navbar-toggle {
position: relative;
float: right;
padding: 5px 5px;
margin-top: 2px;
margin-bottom: 8px;
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.container>.navbar-header, .container-fluid>.navbar-header, .container>.navbar-collapse, .container-fluid>.navbar-collapse {
background-color: #004666;
margin-right: -15px;
margin-left: -15px;
position: relative;
float: none;
}
th{
text-align: center;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Master thesis application</title>
<!-- Jquery -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">
</script>
<link rel="stylesheet" type="text/css" href="https://getbootstrap.com/docs/3.3/examples/jumbotron-narrow/">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<!-- Import css file-->
<link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js"></script>
<!-- Highcharts for normal chart
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
-->
<!-- Highcharts for normal tockSchart -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
</head>
<script type="text/javascript">
</script>
<body>
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
@if (!Sentinel::guest())
<ul class="nav navbar-nav">
<li><a href="/home">Clients</a></li>
<li><a href="/charts">Charts</a></li>
</ul>
@endif
@if (Sentinel::guest())
<ul class="nav navbar-nav">
<li><a href="/">Home</a></li>
</ul>
@endif
@if(!Sentinel::guest())
@if(Sentinel::inRole('admin'))
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
Admin Panel <span class="caret"></span> </a>
<ul class="dropdown-menu" role="menu">
<li><a href="/adminsProfiles">Admins List</a></li>
<li><a href="/viewersProfiles">Users List</a></li>
</ul>
</li>
</ul>
@endif
@endif
@if(!Sentinel::guest())
@if(Sentinel::inRole('viewer'))
<ul class="nav navbar-nav">
<li> <a href="{{ route('profile', ['first_name' => Sentinel::getUser()->first_name]) }}">Profile</a></li>
</ul>
@endif
@endif
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
@if (Sentinel::guest())
<li><a href="/login">Login</a></li>
<li><a href="/register">Register</a></li>
@else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{Sentinel::getUser()->first_name}} <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="{{ URL::to('/logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>
<form id="logout-form" action="{{ URL::to('/logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
@endif
</ul>
</div>
</div>
</nav>
<h2 class="text-center" >List of clients</h2>
<div class="container">
</div> <!-- /container -->
</body>
</html>关于html - 为什么当我更改导航栏高度时 Bootstrap 导航栏下拉菜单不会将内容移动到下方？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52078621/