ウィンドウが縮小されると、ブートストラップの折りたたみバーが透明になります。

Question

私のブートストラップレスポンスの背景に問題があります。

以下に示すように、私のウィンドウを縮小してモバイル画面サイズをシミュレートすると、ドロップダウンが透明になります。

navbar http://i44.tinypic.com/rw49p4.png

これは、ブートストラップサンプルのウェブサイトからコピーした私のコードであり、私が作った唯一の変化は、リンクでした。

<div class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#">Project name</a> 
     </div> 
     <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Dashboard</a></li> 
      <li><a href="#pages">Pages</a></li> 
      <li><a href="#extensions">Extensions</a></li> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
       <ul class="dropdown-menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
       <li><a href="#">Something else here</a></li> 
       <li class="divider"></li> 
       <li class="dropdown-header">Nav header</li> 
       <li><a href="#">Separated link</a></li> 
       <li><a href="#">One more separated link</a></li> 
       </ul> 
      </li> 
      </ul> 
      <div class="navbar-right"> 
      <p style="color:#fff;">some text</p> 
      </div> 
     </div><!--/.navbar-collapse --> 
     </div> 
</div> 

[EDIT] 私は私が私がNAV divの中にCSSプロパティposition: relative;を追加することで問題を解決し、同じ問題を抱えていた

<meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 

Answer 1

私のヘッダにこれを持っている：

<div class="navbar navbar-fixed-top> 

に入った：

<div class="navbar navbar-fixed-top" style="position: relative;"> 

Answer 2

ちょうどこれに遭遇した。 ... .navbar-collapse要素に

<div class="navbar-collapse collapse"> 

を背景スタイルを追加する

<div class="collapse navbar-collapse" style="background:black"> 

この

は私のために問題を解決するように見えたになり、それはあなたの役に立てば幸い！

Answer 3

これは、ナビゲーションバーの高さを固定すると発生します。 CSSを確認し、変更します。この中

height: 50px; 

：

min-height: 50px; 

幸運を。

Answer 4

上記の解決策のどれも私のために働いていませんでした。しかし、私はnavbarにかなり高いz-インデックスz-index: 9999;を与えたとき、透明度は消えました。

Answer 5

あなたはナビゲーションバーの李aの背景を追加する必要があり、このサンプルCSSコード： .navbar li a, .navbar .navbar-brand { color: #fff !important; background-color: #08A2FA; line-height: 1.42857143 !important; /* this for line in desktop mode */ }

Answer 6

は同じ問題

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" style="color: black"> 
      <span class="sr-only ">{% trans "Toggle Navigation" %}</span> 
      <span class="icon-bar grey_dark_l_bg"></span> 
      <span class="icon-bar grey_dark_l_bg"></span> 
      <span class="icon-bar grey_dark_l_bg"></span> 
     </button> 

あなたは.iconバーの背景色を欠落している可能性がありました。 私はnavbarの背景を白に設定していたので、それは私の問題でした。

ハッピーコーディング