2014-02-05 220 views
3
簡化版,崩潰正確

我創建了導航欄當中去一次塌陷小屏幕,但給出了火狐狸問題如波紋管引導3導航欄在Firefox

enter image description here

<header id="pageHeader"> 
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
    <div class="container"> <a class="navbar-brand" href="#">Brand</a> 
     <!-- navbar-collapse --> 
     <button class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-set" > <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> 
     <div class="collapse navbar-collapse" id="navbar-collapse-set" > 
     <ul class="nav navbar-nav navbar-right"> 
      <li class="active"><a href="#">Photos</a></li> 
      <li><a href="#">Professionals</a></li> 
      <li><a href="#">Projects</a></li> 
      <form id="header-search" action="search.php" class="navbar-form navbar-left" role="search"> 
      <div class="form-group"> 
       <input type="text" class="form-control" placeholder="Search for HomeKart"> 
      </div> 
      </form> 
      <li><a href="#">My Favourites</a></li> 
      <li class="dropdown"> <a href="#" class="dropdown-toggle pull-left" data-toggle="dropdown"> <img src="img/header-profile.png" class="pull-left">Andrews<b class="caret"></b> 
      <div class="clearfix"></div> 
      </a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Name 1</a></li> 
       <li class="divider"></li> 
       <li><a href="#">Name 2</a></li> 
       <li><a href="#">Name 3</a></li> 
      </ul> 
      </li> 
     </ul> 
     </div> 
    </div> 
    <!-- /.navbar-collapse --> 
    </nav> 
</header> 

鏈接:http://play.mink7.com/subitha

回答

2

這應該可以解決這個問題

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"><div class="container"> 
    <!-- navbar-collapse --> 
    <div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar collapse-set" > 
<span class="sr-only">Toggle navigation</span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
</button> 
<a class="navbar-brand" href="#">Brand</a> 
</div> 
     <div class="collapse navbar-collapse" id="navbar-collapse-set" > 
     <ul class="nav navbar-nav navbar-right"> 
      <li class="active"><a href="#">Photos</a></li> 
      <li><a href="#">Professionals</a></li> 
      <li><a href="#">Projects</a></li> 
      <form id="header-search" action="search.php" class="navbar-form navbar-left" style="width:100%;" role="search"> 
      <div class="form-group"> 
       <input type="text" class="form-control" placeholder="Search for HomeKart"> 
      </div> 
      </form> 
      <li><a href="#">My Favourites</a></li> 
      <li class="dropdown"> <a href="#" class="dropdown-toggle pull-left" data-toggle="dropdown"> <img src="img/header-profile.png" class="pull-left">Andrews<b class="caret"></b> 
      <div class="clearfix"></div> 
      </a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Name 1</a></li> 
       <li class="divider"></li> 
       <li><a href="#">Name 2</a></li> 
       <li><a href="#">Name 3</a></li> 
      </ul> 
      </li> 
     </ul> 
     </div> 
     </div> 
     <!-- /.navbar-collapse --> 
    </nav> 
+0

的dropdo wn從瀏覽器的頂部開始,它必須從導航欄下方開始。它也給出了滾動條,因爲我已經更新了照片 –

+0

對不起,我誤解了這個問題。仔細看了一下代碼。上面更新的代碼應該修復您的問題 –

+0

試圖找出我所做的錯誤。你可以請分享它,所以我可以知道它 –