Bootstrap 导航栏，左侧和右侧有 2 个品牌，带有居中链接答案

【问题标题】：Bootstrap navbar with 2 brands to the left and right with centered linksBootstrap 导航栏，左侧和右侧有 2 个品牌，带有居中链接
【发布时间】：2014-10-23 00:25:13
【问题描述】：

我想创建一个如下所示的导航栏：

[品牌1] ... [链接1 |链接2 |链接3] ... [品牌2]

这是我得到的，但折叠菜单看起来很奇怪，并且缺少导航栏和折叠菜单之间的边框。 http://www.bootply.com/fp8e8IYGuj

我对宽度大于 768 像素时的外观和行为感到满意，但对折叠后的外观和行为不满意。我希望它表现得像一个“正常”的折叠菜单。比如这个： http://www.bootply.com/GDf0pzFK9b

【问题讨论】：

标签： html css twitter-bootstrap-3

【解决方案1】：

您需要 clear 浮动元素，将其添加到您的 CSS：

/* navbar menu when collapsed */
@media (max-width: 767px) {
  .navbar-collapse {
     clear:both;
  }
}

检查TheDemo

【讨论】：

【解决方案2】：

如果您由于某种原因无法像@Danko 建议的那样更改 CSS，那么您可以坚持使用提供的引导类，只需为移动设备和桌面复制 brand2 元素。

bootstrap 中的 hidden-* css 类允许您在没有额外 CSS 标记的情况下执行此操作。

<div class="navbar-header">
        <a href="#" class="navbar-brand">BRAND1</a>

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <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="navbar-brand pull-right hidden-lg hidden-md hidden-sm">BRAND23</a>
    </div>

  <a href="#" class="navbar-brand pull-right hidden-xs">BRAND2</a>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
            <li><a href="#">Link1</a></li>
            <li><a href="#">Link2</a></li>
            <li><a href="#">Link3</a></li>
        </ul>
    </div>

http://www.bootply.com/Qf9w7wNK6t 的示例

您可以在 Bootstrap 文档中阅读更多信息 - http://getbootstrap.com/css/#responsive-utilities

我个人会使用建议的clear:both 方法。

【讨论】：