引導導航欄不正確時崩潰

所以，這樣的導航欄的高度標誌的高度匹配我已經改變了CSS。它的偉大工程，但是當我崩潰到移動視圖，有一個困擾着我行，看圖片：引導導航欄不正確時崩潰

這是正常的destop版本：

這是摺疊手機的看法：

當我按下漢堡菜單這是摺疊移動視圖。 這就是問題所在，灰線是出於：

這是我的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;} 
}

來源

2016-11-20 Ivan

.navbar具有默認的最小高度：50像素。所以你可以設置標誌圖像的最大高度。就像這樣：.navbar品牌> IMG {最大高度：45像素} –

-1

這是解決方案：

打開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; 
}

然後保存並再次檢查。

來源

2016-11-20 18:16:21

我並不是說這是行不通的，而不是進行一個很好的方式。覆蓋使用CSS的級聯行爲是一個更好的選擇。 – Marcs

更改現成庫和硬編碼用戶期望屬性的代碼是非常糟糕的做法，應始終避免。相反，您可以通過添加一個'

引導導航欄不正確時崩潰

回答