2015-09-09 327 views
0

我試圖在小屏幕上獲得引導程序導航欄以分成兩個獨立的下拉菜單,其中一個菜單的語言將帶有一個小旗子,其餘菜單中將包含實際的菜單頁面。我似乎無法得到這個工作,因爲他們要麼刪除相同的菜單,要麼只有其中一個工作。我不需要與下面的工作,它只是一個模型。謝謝!!Bootstrap多個下拉菜單

<?php /* Navigation: Start */ ?> 
<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
       <span class="sr-only">Trust</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
       <span class="sr-only"></span> 
       <img class="abe-language-flags-menu" src="images/flags/4x3/us.svg"> 
      </button> 
      <a class="navbar-brand" href="index">Trust</a> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav navbar-right "> 
       <li class="active"><a href="#">Home</a></li> 
       <li><a href="#" onmousedown="toggleOverlay()">Login</a></li> 
       <li><a href="#hotels">Hotels</a></li> 
       <li><a href="#rooms">Rooms</a></li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Language<span class="caret"></span></a> 
        <ul class="dropdown-menu"> 
         <li class="language"> 
          <a class="abe-language-name" href="#">English </a> 
          <img class="abe-language-flags img-rounded" src="images/flags/4x3/us.svg"> 
         </li> 
         <li class="language"> 
          <a class="abe-language-name" href="#">German </a> 
          <img class="abe-language-flags img-rounded" src="images/flags/4x3/de.svg"> 
         </li> 
         <li class="language"> 
          <a class="abe-language-name" href="#">Spanish </a> 
          <img class="abe-language-flags img-rounded" src="images/flags/4x3/es.svg"> 
         </li> 
         <li role="separator" class="divider"></li> 
         <li><a href="#">Other languages</a></li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
    </div> 
</nav> 
<?php /* Navigation: End */ ?> 
<?php /* Navigation: Start */ ?> 
<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
       <span class="sr-only">Trust</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
       <span class="sr-only"></span> 
       <img class="abe-language-flags-menu" src="images/flags/4x3/us.svg"> 
      </button> 
      <a class="navbar-brand" href="index">Trust</a> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav navbar-right "> 
       <li class="active"><a href="#">Home</a></li> 
       <li><a href="#" onmousedown="toggleOverlay()">Login</a></li> 
       <li><a href="#hotels">Hotels</a></li> 
       <li><a href="#rooms">Rooms</a></li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Language<span class="caret"></span></a> 
        <ul class="dropdown-menu"> 
         <li class="language"> 
          <a class="abe-language-name" href="#">English </a> 
          <img class="abe-language-flags img-rounded" src="images/flags/4x3/us.svg"> 
         </li> 
         <li class="language"> 
          <a class="abe-language-name" href="#">German </a> 
          <img class="abe-language-flags img-rounded" src="images/flags/4x3/de.svg"> 
         </li> 
         <li class="language"> 
          <a class="abe-language-name" href="#">Spanish </a> 
          <img class="abe-language-flags img-rounded" src="images/flags/4x3/es.svg"> 
         </li> 
         <li role="separator" class="divider"></li> 
         <li><a href="#">Other languages</a></li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
    </div> 
</nav> 
+0

這是我的代碼。我只是說我可以放棄;) – danielbasilio

回答

0

這可能幫助或給你一些想法:您可以將導航完全分成兩個部分;一般標準的導航欄和一個常用的語言下拉菜單。

body { 
 
    padding-top: 125px; 
 
} 
 
.navbar.navbar-default { 
 
    border-radius: 0; 
 
    border: none; 
 
} 
 
.navbar-default.nav-lower { 
 
    height: 20px; 
 
    border-radius: 0; 
 
    border: none; 
 
    margin-bottom: 0; 
 
} 
 
.navbar-default.nav-lower .navbar-toggle, 
 
.navbar-default.nav-lower .navbar-toggle:focus, 
 
.navbar-default.nav-lower .navbar-toggle:hover { 
 
    border: none; 
 
    background: none; 
 
    box-shadow: none; 
 
    outline: none; 
 
} 
 
.navbar-default.nav-lower > li { 
 
    display: inline-block; 
 
    width: 33%; 
 
    text-align: left; 
 
} 
 
.navbar-default.nav-lower .navbar-brand { 
 
    margin-top: 5px; 
 
    font-size: 13px; 
 
} 
 
.navbar-default.nav-lower .navbar-toggle span.glyphicon { 
 
    color: #555; 
 
    font-size: 13px; 
 
} 
 
.navbar-default.nav-lower .navbar-nav .abe-language-name img { 
 
    margin-right: 10px; 
 
} 
 
@media (max-width: 2500px) { 
 
    .navbar-default.nav-lower .navbar-header { 
 
    float: none; 
 
    } 
 
    .navbar-default.nav-lower .navbar-left, 
 
    .navbar-default.nav-lower .navbar-right { 
 
    float: none !important; 
 
    } 
 
    .navbar-default.nav-lower .navbar-toggle, 
 
    .navbar-default.nav-lower .navbar-toggle:hover, 
 
    .navbar-default.nav-lower .navbar-toggle:focus { 
 
    display: block; 
 
    border: none; 
 
    background: none; 
 
    padding-right: 20px; 
 
    } 
 
    .navbar-default.nav-lower .navbar-collapse { 
 
    border-top: 1px solid transparent; 
 
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); 
 
    } 
 
    .navbar-default.navbar-fixed-top { 
 
    top: 0; 
 
    border-width: 0 0 1px; 
 
    } 
 
    .navbar-default.nav-lower .navbar-collapse.collapse { 
 
    display: none !important; 
 
    } 
 
    .navbar-default.nav-lower .navbar-nav { 
 
    float: none !important; 
 
    margin-top: 7.5px; 
 
    } 
 
    .navbar-default.nav-lower .navbar-nav > li { 
 
    float: none; 
 
    } 
 
    .navbar-default.nav-lower .navbar-nav > li > a { 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    } 
 
    .navbar-default.nav-lower .collapse.in { 
 
    display: block !important; 
 
    } 
 
    .navbar-default.nav-lower .navbar-nav .open .dropdown-menu { 
 
    position: static; 
 
    float: none; 
 
    width: auto; 
 
    margin-top: 0; 
 
    background-color: transparent; 
 
    border: 0; 
 
    -webkit-box-shadow: none; 
 
    box-shadow: none; 
 
    } 
 
    .navbar-default.nav-lower .navbar-collapse { 
 
    text-align: left; 
 
    background: #f5f5f5; 
 
    } 
 
} 
 
@media (min-width: 767px) { 
 
    .navbar.nav-lower .navbar-toggle, 
 
    .navbar.nav-lower .navbar-toggle:focus, 
 
    .navbar.nav-lower .navbar-toggle:hover { 
 
    margin-right: 30px; 
 
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-navbar"> <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="#">Trust</a> 
 

 
    </div> 
 
    <div class="navbar-collapse collapse" id="bs-navbar"> 
 
     <!-- Non-collapsing right-side icons --> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li class="active"><a href="#">Home</a> 
 

 
     </li> 
 
     <li><a href="#" onmousedown="toggleOverlay()">Login</a> 
 

 
     </li> 
 
     <li><a href="#hotels">Hotels</a> 
 

 
     </li> 
 
     <li><a href="#rooms">Rooms</a> 
 

 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
    <!-- /.container-fluid --> 
 
    <nav class="navbar navbar-default nav-lower"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-lower-nav" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> 
 
     <span class="glyphicon glyphicon-chevron-down"></span> 
 

 
     </button> <a class="navbar-brand" href="#">Select a Language</a> 
 

 
    </div> 
 
    <div class="collapse navbar-collapse" id="bs-lower-nav"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="language"> 
 
      <a class="abe-language-name" href="#"> 
 
      <img class="abe-language-flags img-rounded" src="http://placehold.it/20x20/f00/f00">English</a> 
 

 
     </li> 
 
     <li class="language"> 
 
      <a class="abe-language-name" href="#"> 
 
      <img class="abe-language-flags img-rounded" src="http://placehold.it/20x20/f00/f00">German</a> 
 

 
     </li> 
 
     <li class="language"> 
 
      <a class="abe-language-name" href="#"> 
 
      <img class="abe-language-flags img-rounded" src="http://placehold.it/20x20/f00/f00">Spanish</a> 
 

 
     </li> 
 
     <li role="separator" class="divider"></li> 
 
     <li><a href="#">Other languages</a> 
 

 
     </li> 
 
     </ul> 
 
    </div> 
 
    </nav> 
 
</nav> 
 
<div class="container"> 
 
    <div class="well">Boostrap Mobile</div> 
 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It 
 
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop 
 
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer 
 
    took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset 
 
    sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's 
 
    standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
 
    It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the 
 
    printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, 
 
    but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker 
 
    including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled 
 
    it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
 
    and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since 
 
    the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in 
 
    the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting 
 
    industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic 
 
    typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem 
 
    Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
 
    It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop 
 
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer 
 
    took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset 
 
    sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's 
 
    standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
 
    It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the 
 
    printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, 
 
    but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker 
 
    including versions of Lorem Ipsum.</p> 
 
</div>

0

所以我想通了,我創建了獨立的數據目標,導航欄和navbar2和使用隱藏XS和隱藏-SM等,使它看起來不錯。 :)感謝您的幫助@vanburenx問題解放了我的想法給它另一種方法;-)

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
       <span class="sr-only">Trust</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar2" aria-expanded="false" aria-controls="navbar"> 
       <span class="sr-only"></span> 
       <img class="abe-language-flags-menu" src="images/flags/4x3/us.svg"> 
      </button> 
      <a class="navbar-brand" href="index">Trust</a> 
     </div> 

     <div id="navbar" class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav navbar-right "> 
       <li class="active"><a href="#">Home</a></li> 
       <li><a href="#" onmousedown="toggleOverlay()">Login</a></li> 
       <li><a href="#hotels">Hotels</a></li> 
       <li><a href="#rooms">Rooms</a></li> 
       <li class="dropdown hidden-xs"> 
        <a href="#" class="dropdown-toggle hidden-xs" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Language<span class="caret"></span></a> 
        <ul class="dropdown-menu"> 
         <li class="language"> 
          <a class="abe-language-name" href="#">English </a> 
          <img class="abe-language-flags img-rounded" src="images/flags/4x3/us.svg"> 
         </li> 
         <li class="language"> 
          <a class="abe-language-name" href="#">German </a> 
          <img class="abe-language-flags img-rounded" src="images/flags/4x3/de.svg"> 
         </li> 
         <li class="language"> 
          <a class="abe-language-name" href="#">Spanish </a> 
          <img class="abe-language-flags img-rounded" src="images/flags/4x3/es.svg"> 
         </li> 
         <li role="separator" class="divider"></li> 
         <li><a href="#">Other languages</a></li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
     <div id="navbar2" class="navbar-collapse collapse hidden-sm hidden-md hidden-lg"> 
      <ul class="nav navbar-nav navbar-right hidden-sm hidden-md hidden-lg"> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Change Language<span class="caret"></span></a> 
        <ul class="dropdown-menu"> 
         <li class="language"> 
          <a class="abe-language-name" href="#">English </a> 
          <img class="abe-language-flags img-rounded" src="images/flags/4x3/us.svg"> 
         </li> 
         <li class="language"> 
          <a class="abe-language-name" href="#">German </a> 
          <img class="abe-language-flags img-rounded" src="images/flags/4x3/de.svg"> 
         </li> 
         <li class="language"> 
          <a class="abe-language-name" href="#">Spanish </a> 
          <img class="abe-language-flags img-rounded" src="images/flags/4x3/es.svg"> 
         </li> 
         <li role="separator" class="divider"></li> 
         <li><a href="#">Other languages</a></li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
    </div> 
</nav>