Bootstrap導航欄左側的內容在縮小窗口大小時消失

問題在於導致縮小窗口大小時導航欄中的左側內容消失。我試過使用row和column（column-sm and column-xs-）類修復問題，但它仍然存在。Bootstrap導航欄左側的內容在縮小窗口大小時消失

我也附上了酒吧的圖像。

在第一張圖像的屏幕尺寸達到最大

在第2圖像的屏幕的尺寸則縮小

所以我想，內容XYZ應始終看到不管屏幕大小如何。

我也給導航欄的html代碼：

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
      <div class="row row-content"> 
       <div class="col-xs-11 col-sm-4"> 
        <ul class="nav navbar-nav navbar"> 
         <li> <a href="#"><b> XYZ </b></a></li> 
        </ul> 
       </div> 
       <div class="col-xs-1 col-sm-8"> 
        <ul class="nav navbar-nav navbar-right"> 

         <li class="active"><a href="#"><span class="glyphicon glyphicon-home" 
          aria-hidden="true"></span> Home</a></li> 
         <li><a href="aboutus.html"><span class="glyphicon glyphicon-info-sign" 
          aria-hidden="true"></span>About</a></li> 
         <li><a href="contactus.html"> <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> Contact</a></li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </div> 
</nav>

任何幫助將不勝感激。謝謝。

來源

2016-05-30 Snake Eyes

那麼，你剛剛放錯了你的品牌錨標籤'XYZ'。並將navbar-brand用於您的品牌。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
     <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="#"><b> XYZ </b></a> 
 
    </div> 
 
    <div id="navbar" class="navbar-collapse collapse"> 
 
     <div class="row row-content"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li class="active"><a href="#"><span class="glyphicon glyphicon-home" 
 
          aria-hidden="true"></span> Home</a> 
 
      </li> 
 
      <li><a href="aboutus.html"><span class="glyphicon glyphicon-info-sign" 
 
          aria-hidden="true"></span>About</a> 
 
      </li> 
 
      <li> 
 
      <a href="contactus.html"> <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> Contact</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 
</nav>

來源

2016-05-30 19:00:50

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Case</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
</head> 
<body> 

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
       <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="#"><b> XYZ </b></a></li> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
        <ul class="nav navbar-nav navbar-right"> 

         <li class="active"><a href="#"><span class="glyphicon glyphicon-home" 
          aria-hidden="true"></span> Home</a></li> 
         <li><a href="aboutus.html"><span class="glyphicon glyphicon-info-sign" 
          aria-hidden="true"></span>About</a></li> 
         <li><a href="contactus.html"> <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> Contact</a></li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </div> 
</nav> 
</body> 
</html>

試試這個。

的事情是，你正在使用的navbar-collapse
與navbar-brand類的鏈接，這就是爲什麼它也崩潰。

我希望問題解決了。

來源

2016-05-30 18:56:22 bhansa

最好給jQuery的鏈接之前引導JS拿到切換工作。 – bhansa

Bootstrap導航欄左側的內容在縮小窗口大小時消失

回答

相關問題