Question

我想创建一个看起来像的导航栏：

[BRAND1] ... [LINK1 | LINK2 | LINK3] ...... [BRAND2]

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

当宽度为＆gt;时，我对外观和行为感到满意。比768px，但不是崩溃的外观和行为。我希望它表现得像一个“正常”的折叠菜单。例如这一个： http://www.bootply.com/GDf0pzFK9b

Answer 1

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

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

检查 TheDemo

Answer 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方法。

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

2 个答案: