引导导航栏不正确时崩溃
问题描述:
所以,这样的导航栏的高度标志的高度匹配我已经改变了CSS。它的伟大工程,但是当我崩溃到移动视图,有一个困扰着我行,看图片:引导导航栏不正确时崩溃
当我按下汉堡菜单这是折叠移动视图。 这就是问题所在,灰线是出于:
这是我的html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> Mobtech </title>
<!--Ubaci bootstrap css -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-container">
<span class="sr-only"> Pokazi i sakrij navigaciju </span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="Slike/logo.png" alt="LogoSlika"/>
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-container">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#"> Početna strana </a> </li>
<li><a href="#"> Privatni korisnici </a> </li>
<li><a href="#"> Poslovni korisnici </a> </li>
<li><a href="#"> Uređaji </a> </li>
<li><a href="#"> O Nama </a> </li>
</ul>
</div>
</div>
</nav>
<br />
<div class="container"> <!--Container -->
<div class="row">
<!-- Kolona na velikom ekranu (lg) prikazuje duzinu jedne kolone, Ekstra small (xs) prikazuje 4 kolone -->
<div class="col-lg-12 bg-success">
<p> Outer div </p>
<div class="col-lg-6 bg-primary">
<p> Inner div </p>
</div>
</div>
</div>
</div>
<!-- JavaScript fajl -->
<script src="js/jquery.min.js"></script>
<!-- Kompresovan JavaScript fajl -->
<script src="js/bootstrap.min.js"></script>
<!-- bg-warning = Pozadina zuta -->
</body>
</html>
这是我的CSS:
.navbar-default .navbar-nav>li>a {
padding: 21px 15px 21px 15px;
}
.navbar-default .navbar-brand {
padding-top: 0px;
}
@media (max-width: 767px) {
.navbar-nav > li > a {
line-height: 21px;
padding-top: 10px;
padding-bottom: 10px;}
}
@media (max-width: 767px) {
.navbar-default {
line-height: 21px;
padding-top: 0px;
padding-bottom: 11px;}
}
答
这是解决方案:
- 打开bootstrap.min.css文件
-
搜索该代码:
container-fluid>.navbar-collapse, .container-fluid>.navbar-header, .container>.navbar-collapse, .container>.navbar-header { margin-right:-15px; margin-left:-15px }
-
添加
height:150px
上述代码的结束。添加代码之后,可能是这样的:
container-fluid>.navbar-collapse, .container-fluid>.navbar-header, .container>.navbar-collapse, .container>.navbar-header { margin-right:-15px; margin-left:-15px; height:150px; }
- 然后保存并再次检查。
+0
我并不是说这是行不通的,而不是进行一个很好的方式。覆盖使用CSS的级联行为是一个更好的选择。 – Marcs
+0
更改现成库和硬编码用户期望属性的代码是非常糟糕的做法,应始终避免。相反,您可以通过添加一个'
.navbar具有默认的最小高度:50像素。所以你可以设置标志图像的最大高度。就像这样:.navbar品牌> IMG {最大高度:45像素} –