Два меню в том же баре Nav

Question

Я хочу иметь два разворачиваемых меню в одном ряду строк навигации. В левом меню отобразится главное меню сайта, а справа отобразится «меню пользователя».

<div class="navbar navbar-inverse navbar-fixed-top"> 
<div class="container"> 
    <div class="navbar-header">   
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#user-menu"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-menu"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">My Site</a> 
    </div> 

    <span id="main-menu" class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="about">About</a></li> 
     <li><a href="members">Members</a></li> 
     <li><a href="forum">Forum</a></li> 
     <li><a href="mow">Register</a></li> 
     <li class="dropdown"> 
      <a href="Products" class="dropdown-toggle" data-toggle="dropdown">Products <b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
       <li><a href="cars">Factions</a></li> 
       <li><a href="software">Tanks</a></li> 
       <li><a href="food">Infantry</a></li> 
      </ul> 
       </li> 
       </ul> 
      <form id="sys-login_form" target="passwordIframe" method="POST" action="blank.php" class="navbar-form navbar-right"> 
       <span id="sys-login_status"></span> 
       <div class="form-group"> 
        <input type="text" placeholder="Username" class="form-control" name="username" id="sys-login-username" title="Username" data-active="0"> 
       </div> 
       <div class="form-group"> 
        <input type="password" placeholder="Password" class="form-control" name="password" id="sys-login-password" title="Password" data-active="0"> 
       </div> 
       <input name="remember_login" id="sys-login-remember" type="checkbox" checked="checked" value="forever" title="Remember"> 
       <button type="button" class="btn btn-success" title="Login" name="login_btn" id="sys-login_btn" data-in_use="0">Go</button> 
      </form> 
      <iframe id="sys-passwordIframe" name="passwordIframe" style="display:none"></iframe> 
     </span> 

     <span id="user-menu" class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li class="dropdown"> 
        <a href="profile/fred" id="sys-username_box" class="dropdown-toggle" data-toggle="dropdown">Fred <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
         <li><a href="account/settings">Settings</a></li> 
         <li><a data-in_use="0" href="account/logout">Logout</a></li> 
        </ul> 
       </li> 
       <li class="dropdown"><a href="about">Mail</a></li> 
       <li><a href="about">Bookmarks</a></li> 
      </ul>"; 
     </span> 
    </div></div> 

Он отлично работает в мобильном режиме т.е. 2 разрушился отображением меню, однако в обычном режиме или в полноэкранном режиме меню пользователя вправо проталкивается вниз на новую строку ниже главного меню.

Полный пример этого можно увидеть здесь: http://bootply.com/79056

Answer 1

Для первой панели навигации, добавить pull-left к атрибуту class, т.е.

<ul class="nav navbar-nav pull-left">...</ul> 

Как правило, вам не нужно будет добавить, но потому, что вы хотите два отдельных разборного меню, первым нужно ему будет предложено поплавать влево, чтобы вторая не была вынуждена уйти.

Адрес example. Примечание. Предполагается, что если вы вошли в систему, будет отображаться только , затем. Как бы то ни было, если форма входа всегда была видимой и всегда отображалось меню пользователя, ширина, указанная в классе .container, будет слишком узкой.

Answer 2

Вы не должны использовать <span>, чтобы сделать что-то инлайн. Вместо этого используйте <div> и используйте float или что-то вроде SimpleGrid, чтобы установить макет.