2016-11-20 164 views
0

所以,这样的导航栏的高度标志的高度匹配我已经改变了CSS。它的伟大工程,但是当我崩溃到移动视图,有一个困扰着我行,看图片:引导导航栏不正确时崩溃

这是正常的destop版本: enter image description here

这是折叠手机的看法: enter image description here

当我按下汉堡菜单这是折叠移动视图。 这就是问题所在,灰线是出于enter image description here

这是我的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;} 
} 
+1

.navbar具有默认的最小高度:50像素。所以你可以设置标志图像的最大高度。就像这样:.navbar品牌> IMG {最大高度:45像素} –

回答

-1

这是解决方案:

  1. 打开bootstrap.min.css文件
  2. 搜索该代码:

    container-fluid>.navbar-collapse, 
    .container-fluid>.navbar-header, 
    .container>.navbar-collapse, 
    .container>.navbar-header { 
        margin-right:-15px; 
        margin-left:-15px 
    
    } 
    
  3. 添加height:150px上述代码的结束。

    添加代码之后,可能是这样的:

    container-fluid>.navbar-collapse, 
    .container-fluid>.navbar-header, 
    .container>.navbar-collapse, 
    .container>.navbar-header { 
        margin-right:-15px; 
        margin-left:-15px; 
        height:150px; 
    } 
    
  4. 然后保存并再次检查。
+0

我并不是说这是行不通的,而不是进行一个很好的方式。覆盖使用CSS的级联行为是一个更好的选择。 – Marcs

+0

更改现成库和硬编码用户期望属性的代码是非常糟糕的做法,应始终避免。相反,您可以通过添加一个'