折りたたまれたときにブートストラップナビゲーションバーが正しくない

ナビゲーションバーの高さがロゴの高さと一致するように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のデフォルトの最小高さは50pxです。したがって、ロゴ画像の最大高を設定することができます。このように：.navbar-brand> img {max-height：45px} –

-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

準備が整えられたライブラリのコードとハードコードのユーザーが望むプロパティを変更することは、とても悪いことであり、常に避けるべきです。代わりに、 '

折りたたまれたときにブートストラップナビゲーションバーが正しくない

答えて