Question

我试图模仿来自Chobani的菜单，这是一个双重菜单，我几乎在那里，但我不能让项目集中在导航栏上，任何人都有任何建议？或者，如果有人有更好的想法这样做。

我已尝试使用.nav-justify和display：table on navbar-nav class，但这会导致第二个菜单上的项目无法使用。

<div class="container-fluid">
    <nav class="navbar navbar-default" role="navigation" id="topmenu">
        <ul class="navbar logos-menu pull-left">
            <li>
                <a href="#" data-toggle="collapse" data-target="#one">
                    <img src="http://placehold.it/90x45">
                </a>
            </li>
            <li>
                <a href="#" data-toggle="collapse" data-target="#two">
                    <img src="http://placehold.it/90x45">
                </a>
            </li>
        </ul>
        <ul class="nav navbar-nav">
            <li class="dropdown">
                <a href="#" data-toggle="collapse" data-target="#one">One</a>
            </li>
            <li class="dropdown">
                <a href="#" data-toggle="collapse" data-target="#two">Two</a>
            </li>
            <li class="dropdown">
                <a href="#" data-toggle="collapse" data-target="#three">Three</a>
            </li>
        </ul>
    </nav>
</div>
<div class="container-fluid">
    <nav class="navbar navbar-default" role="navigation" id="submenu">
        <ul class="nav navbar-nav collapse" id="one">
            <li><a href="#" id="">One sub 1</a></li>
            <li><a href="#" id="">One sub 2</a></li>
            <li><a href="#" id="">One sub 3</a></li>
            <li><a href="#" id="">One sub 4</a></li>
        </ul>
        <ul class="nav navbar-nav collapse" id="two">
            <li><a href="#" id="">Two sub 1</a></li>
            <li><a href="#" id="">Two sub 2</a></li>
            <li><a href="#" id="">Two sub 3</a></li>
        </ul>
         <ul class="nav navbar-nav collapse" id="three">
            <li><a href="#" id="">Three sub 1</a></li>
            <li><a href="#" id="">Three sub 2</a></li>
        </ul>
    </nav>
</div>

JSFiddle中的

Demo

提前致谢。

Answer 1

尝试使用这样的nav-justified ......

<div class="container-fluid">
    <ul class="nav nav-justified navbar-default">
      <li class="dropdown">
        <a href="#" data-toggle="collapse" data-target="#one">One</a>
      </li>
      <li class="dropdown">
        <a href="#" data-toggle="collapse" data-target="#two">Two</a>
      </li>
      <li class="dropdown">
        <a href="#" data-toggle="collapse" data-target="#three">Three</a>
      </li>
      <li class="dropdown">
        <a href="#" data-toggle="collapse" data-target="#four">Four</a>
      </li>
    </ul>
</div>
<div class="container-fluid">
  <nav id="submenu">
    <ul class="nav nav-justified">
      <li>
        <ul class="nav nav-justified collapse" id="one">
          <li><a href="#" id="">One sub 1</a></li>
          <li><a href="#" id="">One sub 2</a></li>
          <li><a href="#" id="">One sub 3</a></li>
          <li><a href="#" id="">One sub 4</a></li>
        </ul>
       </li>
       <li>
         <ul class="nav nav-justified collapse" id="two">
            <li><a href="#" id="">Two sub 1</a></li>
            <li><a href="#" id="">Two sub 2</a></li>
            <li><a href="#" id="">Two sub 3</a></li>
          </ul>
       </li>
       <li>
          <ul class="nav nav-justified collapse" id="three">
            <li><a href="#" id="">Three sub 1</a></li>
            <li><a href="#" id="">Three sub 2</a></li>
          </ul>
       </li>
       <li>
          <ul class="nav nav-justified collapse" id="four">
            <li><a href="#" id="">Four sub 1</a></li>
            <li><a href="#" id="">Four sub 2</a></li>
          </ul>
       </li>
    </ul>
  </nav>
</div>

http://bootply.com/dX9iCfcI9c

中心导航栏菜单项

1 个答案: