手机上的Bootstrap CSS Navbar未显示

Question

我想在移动版本中显示我的页面上的徽标和按钮。我目前正在使用Bootstrap Navbar：

        <div class="navbar-header">
            <a class="navbar-brand" href="#first" >
                <img src="assets/logotech500px.png" alt="" style="width:20px;height:20px;">
            </a>
        </div>
        <div class="navbar-collapse collapse" id="bs-navbar">
            <ul class="nav navbar-nav">
                <li>
                    <a class="page-scroll" class="active" href="#first">Home</a>
                </li>
                <li>
                    <a class="page-scroll" href="#one">About</a>
                </li>
            </ul>
        </div>

使用以下代码仅在Navbar-Header内部的徽标上显示在移动设备，家庭，关于HOSOD。

首先：基于您的HTML，您没有

 <nav class="navbar navbar-default">
</nav>

应该是

<nav class="navbar navbar-default">
  <div class="navbar-header">
    <a class="navbar-brand" href="#first">
      <img src="assets/logotech500px.png" alt="" style="width:20px;height:20px;">
    </a>
    <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>
  </div>
  <div class="navbar-collapse collapse" id="bs-navbar">
    <ul class="nav navbar-nav">
      <li>
        <a class="page-scroll" class="active" href="#first">Home</a>
      </li>
      <li>
        <a class="page-scroll" href="#one">About</a>
      </li>
    </ul>
  </div>
</nav>

第二：引导程序隐藏了移动设备中的Navbar-Collapse，但您可以使用按钮进行切换。

没有按钮的小提琴..

带有按钮的小提琴..

尝试删除类Navbar-Collapse Collapse和ID BS-NAVBAR。这些类与引导程序库有关，当视口检测屏幕的给定宽度（移动设备）时，它使菜单Colapse成为菜单。通过删除这些类，即使在移动设备中也将始终显示按钮。