Question

问题是当缩小窗口大小时，导航栏中的左侧内容会消失。我尝试使用row和column（column-sm and column-xs-）类修复问题，但它仍然存在。

我还附上了酒吧的图片。

在第一张图像中，屏幕尺寸最大化

在第二张图像中，屏幕尺寸减小

所以我希望无论屏幕尺寸如何，都应始终看到 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>

任何帮助将不胜感激。谢谢。

Answer 1

<!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-brand中使用了navbar-collapse类的链接，这就是为什么它也会崩溃的原因。

我希望问题得到解决。

Answer 2

嗯，你错了你的品牌锚标签＆＃39; XYZ＆＃39;。并将navbar-brand用于您的品牌。

＆＃13;

<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>

＆＃13;

在减小窗口大小时，Bootstrap导航栏左侧内容会消失

2 个答案: