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导航栏左侧的内容在缩小窗口大小时消失

回答

相关问题