css - 构建 Bootstrap 3 的导航栏以支持左对齐和右对齐的内容(桌面和移动)

Question

我正在尝试构建一个 Bootstrap 导航栏，这样我就可以在同时为桌面和移动屏幕工作时同时拥有左 和 右对齐内容。我有一种感觉，就像我想在这里吃我的蛋糕，但我想这应该是可能的。

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

这就是我希望我的移动 View (大致)看起来像的样子:

但我得到的是:

这里是桌面版，仅供对比:

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

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

我只是不确定我需要做什么才能获得上面我想要的 View 。我可以看出问题似乎归结为 navbar-header 的宽度太大:

但我不确定如何为 navbar-header 强制执行更小的宽度，或者只是一个包含 navbar-header 内容的宽度。有什么想法吗？

Answer 1

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

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

您可能必须根据您的 Bootstrap 设置更改 768 和 250 值。但很可能这样做。