Question

我有一个带两个不同菜单的bootstrap导航栏。一个居中，一个居中。徽标显示在左侧。

在移动视图中，两个菜单都已折叠。这是唯一的方法，我让桌面视图以我想要的方式工作。

但我在移动视图中真正想要的是左侧有折叠按钮，右侧是徽标，右侧是第二个菜单。

有没有一种好方法可以实现这一目标？

桌面视图： | LOGO | MENU 1 |菜单2 |

移动视图 | MENU 1 COLLAPSE-BUTTON | LOGO |菜单2 |

这是我的实际代码：

<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-navbar-collapse">
            <span class="sr-only">Collapse</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a href="" class="navbar-brand" title=""><img src="LOGO" /></a>
    </div>

    <div class="collapse navbar-collapse" id="main-navbar-collapse">

        <ul class="nav navbar-nav">
            /// MENU 1 - Mobile view collapsed
        </ul>

        <ul class="nav navbar-nav navbar-right">
            /// MENU 2 - Mobile view right
        </ul>
    </div>

</div>
</nav>

Answer 1

您可以尝试这样的方法，但需要使用自定义CSS来实现折叠navbar ..

<nav class="navbar navbar-default">
  <div class="navbar-header">
      <a class="navbar-brand" href="#">Logo</a>
      <a class="navbar-toggle navbar-link pull-left" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
      </a>
  </div>
  <ul class="nav navbar-nav navbar-right pull-right">
    <li><a href="#">Menu2</a></li>
    <li><a href="#">Right</a></li>
  </ul>
  <div class="collapse navbar-collapse" id="collapsed-navigation">
      <ul class="nav navbar-nav navbar-left">
        <li><a href="#">Menu1</a></li>
        <li><a href="#">Left</a></li>
        <li><a href="#">Left</a></li>
      </ul>
  </div><!-- /.navbar-collapse -->
</nav>

工作演示：http://www.bootply.com/pOdynPWRbt

Answer 2

好吧，我不知道正确的方法，但我认为下面的解决方案应该工作

创建一个div并放置| LOGO | MENU 1 |在那个div中让它向左浮动。

现在在移动媒体查询中只需使徽标浮动，它就可以解决您的问题

桌面视图：| | LOGO |菜单1 ||菜单2 |

移动视图：|| MENU 1 COLLAPSE-BUTTON | LOGO ||菜单2 |

在移动视图中以居中徽标为中心的Bootstrap导航

2 个答案: