使用页面的标题和徽标在同一级别上显示导航栏

Question

我使用bootstrap创建了一个导航栏，该导航栏位于徽标和页面标题下方。

但是当谈到较小的设备（手机）时，我想将折叠的导航栏放在与我的标题和徽标相同的水平上，但我无法弄清楚如何做到这一点。以下是我到目前为止的情况：

<div id="menu" class="navbar navbar-inverse" role="navigation">
  <h1 style="text-align: center;margin-top:0;">
    <a href="#/" style="color:white;text-decoration:none">
      <img id="logo" src = "images/logo.svg" width="20px">
    </a>
    <a id="title" href="#/" style="color:white;font-family: fantasy;text-decoration:none">Title of the page </a>
  </h1>
  <div class="navbar-header">
    <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="collapse navbar-collapse" id="js-navbar-collapse" ng-controller="HeaderCtrl">
    <ul class="nav navbar-nav" >
      <li ng-class="{ active: isActive('/about') }"><a href="#/about">aa</a></li>
      <li class="dropdown">
        <a href="#" data-toggle="dropdown" class="dropdown-toggle">bb<b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">aa</a></li>
          <li><a href="#">bb</a></li>
          <li><a href="#">cc</a></li>
        </ul>
      </li>
      <li ng-class="{ active: isActive('/aa') }"><a href="#/aa">cc</a></li>
      <li ng-class="{ active: isActive('/dd') }"><a href="#/dd">dd</a></li>
      <li ng-class="{ active: isActive('/ee') }"><a href="#/ee">ee</a></li>
    </ul>
  </div>
</div>

这是我的小片段：https://jsfiddle.net/Lasjo4xz/3/

Answer 1

试试此代码

@media (max-width: 767px) {
   h1 {
      position: absolute;
      left: 0;
      right: 0;
   }
   ...
}

position:absolute将使标题（带有img的h1）失去它占用的空间，以便它可以位于导航div的顶部。我发现这是一个简单的解决方案，因为如果你想浮动导航栏div，可能会导致宽度问题

left:0; and right:0;确保元素水平居中。

Answer 2

这是一个快速简单的解决方法：

@media (max-width: 767px)
    #menu {
        display: flex;
        justify-content: center;
    }

h1是一个块元素。这意味着它始终占据容器的完整可用宽度。

包含菜单图标的div也是如此。

它们位于不同的行（垂直堆叠），因为它们都是块元素。

您可以尝试在媒体查询中将其切换为inline-block。这将把它们排成一行。或者你可以使用flex。