Question

我使用以下代码在中间显示徽标，在两侧显示2个导航链接项。这在桌面模式下非常有效，但当它缩小到移动时，它就会消失。我希望左侧的徽标和移动设备右侧的汉堡菜单。这可能吗？

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<header role="banner">
  <nav id="navbar-primary" class="navbar" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-primary-collapse">
          <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 class="collapse navbar-collapse" id="navbar-primary-collapse">
        <ul class="nav navbar-nav">
          <li><a href="/advertise">Advertise</a></li>
          <li><a href="/contact">Contact</a></li>
          <li>
            <a href="/"><img id="logo-navbar-middle" src="logo.png" width="180" alt="Logo here"></a>
          </li>
          <li><a href="/register">Register</a></li>
          <li><a href="/login">Login</a></li>
        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
  </nav>
</header>
<!-- header role="banner" -->

＆＃13;

Answer 1

试试这个

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<header role="banner">
  <nav id="navbar-primary" class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-primary-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a href="/" class="mob-Logo"><img id="logo-navbar-middle" src="logo.png" width="180" alt="Logo here"></a>
      </div>
      <div class="collapse navbar-collapse" id="navbar-primary-collapse">
        <ul class="nav navbar-nav">
          <li><a href="/advertise">Advertise</a></li>
          <li><a href="/contact">Contact</a></li>
          <li class="desk-logo">
            <a href="/"><img id="logo-navbar-middle" src="logo.png" width="180" alt="Logo here"></a>
          </li>
          <li><a href="/register">Register</a></li>
          <li><a href="/login">Login</a></li>
        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
  </nav>
</header>

this

Bootstrap 3在手机上没有显示汉堡包菜单和徽标

1 个答案: