构建Bootstrap 3的Navbar以支持left＆amp;正确对齐的内容（桌面和移动）

Question

我正在尝试构建一个Bootstrap导航栏，这样我就可以同时保留左右和右对齐内容，同时适用于桌面和桌面。手机屏幕。我有一种感觉，就像我在这里尝试吃蛋糕一样，但是我想这应该是可能的。

请注意，在下面的屏幕截图中，汉堡菜单图标只是一个自定义图像（例如，不是默认的Bootstrap导航栏折叠图标）。

这就是我想要的移动视图（粗略地）：

但我得到的是：

以下是桌面版，仅供比较：

最后，这是我正在使用的代码：

<div id="navbar" class="navbar navbar-custom navbar-custom-bordered-header">
  <div class="navbar-header">
    <div class="navbar-brand">
      <img class="navbar-menu-button-custom" src="/assets/menu_button.png"/>
    </div>
    <a class="navbar-brand navbar-custom-brand" href="<%= root_path %>">My App</a>
  </div>
  <ul class="nav navbar-nav navbar-right" style="margin-right: 15px; width: auto;">
    <div class="navbar-brand">
      <a id="search" href="#"><span class="glyphicon glyphicon-search" style="color: white;" aria-hidden="true"></span></a>
    </div>
  </ul>
</div>

我只是不确定我需要做些什么来实现我上面所希望的观点。我可以看到问题似乎归结为navbar-header的宽度太大：

但我不确定如何为navbar-header强制执行较小的宽度，或仅仅拥抱navbar-header的内容。有什么想法吗？

Answer 1

将此添加到您的css文件中。

@media (max-width: 768px) {
.navbar-header {
max-width: 250px;
}
}

您可能需要根据引导程序设置更改768和250值。但很可能会这样做。