Question

我很难弄清楚如何以某种方式实现bootstrap 3菜单，使其正确浮动并且部分崩溃，例如：

Brand                         Item 1 Item 2 Item 3 Item 4

折叠后的

看起来那样：

Brand                         Item 4 [Toggle menu]

我想我已经接近了，但无法使其正常运作：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
    <button class="navbar-toggle" data-toggle="collapse" data-target=".menu-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Brand</a>
</div>
<div class="navbar-right">
    <div class="collapse navbar-collapse menu-collapse">
        <ul class="nav navbar-nav">
            <li>Test right-middle</li>
        </ul>
    </div>
    <ul class="nav navbar-nav">
        <li>Test right-most</li>
    </ul>
</div>

我有什么想法可以解决“最正确的测试”而不是被推到下一行？

Answer 1

为不可折叠的项目

添加单独的navbar-header

<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
  <div class="container">

    <!-- Title -->
    <div class="navbar-header pull-left">
      <a href="#" class="navbar-brand">BRAND</a>
    </div>

    <!-- 'Sticky' (non-collapsing) right-side menu item(s) -->
    <div class="navbar-header pull-right">
      <ul class="nav pull-left">

        <li class="navbar-text pull-left">Item 3</li>


      </ul>

      <!-- Required bootstrap placeholder for the collapsed menu -->
      <button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
    </div>



    <!-- Additional navbar items -->
    <div class="collapse navbar-collapse navbar-right">
      <!--                      pull-right keeps the drop-down in line -->
      <ul class="nav navbar-nav pull-right">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
      </ul>
    </div>
  </div>
</nav>

<强> JSFIDDLE

Answer 2

尝试使用类navbar-header

将内容放在div中

所以不要声明：

<div class="navbar-right">

请改用以下课程：

<div class="navbar-header pull-right">

navbar-right部分崩溃

2 个答案: