Язык сборщика в NavBar правой стороне с Bootstrap

Question

У меня есть эта часть кода:

<div id="navbar-main"> 
    <!-- Fixed navbar --> 
<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=".navbar-collapse"> 
     <span class="icon icon-heart" style="font-size:30px; color:#3498db;"></span> 
     </button> 
     <a class="navbar-brand hidden-xs hidden-sm" href="#home"><span class="icon icon-heart" style="font-size:18px; color:#3498db;"></span></a> 
    </div> 
    <div class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
     <li><a href="#home" class="smoothScroll">Home</a></li> 
     <li> <a href="#about" class="smoothScroll"> About</a></li> 
     <li> <a href="#houses" class="smoothScroll"> Houses</a></li> 
     <li> <a href="#products" class="smoothScroll"> Products</a></li> 
     <li> <a href="#contact" class="smoothScroll"> Contact</a></li> 
      <li><a href="#" class="language" rel="it-IT"><img src="assets/img/it_IT.png" alt="Italiano" /></a></li> 
      <li><a href="#" class="language" rel="en-US"><img src="assets/img/en_US.png" alt="English" /></a></li> 
    </div><!--/.nav-collapse --> 

    </div> 
</div> 
</div> 

Я поставил бы этот язык сборщика

<li><a href="#" class="language" rel="it-IT"><img src="assets/img/it_IT.png" alt="Italiano" /></a></li> 
      <li><a href="#" class="language" rel="en-US"><img src="assets/img/en_US.png" alt="English" /></a></li> 

в правой части навигационной панели и, если это возможно в выпадающем меню.

Как я могу это сделать? Я пробовал с атрибутами класса pull-right и dropdown-menu, но безуспешно.

Answer 1

Из bootstrap documentation я нашел это:

<ul class="nav navbar-nav navbar-right"> 
    <li><a href="#">Link</a></li> 
    <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> 
     <ul class="dropdown-menu" role="menu"> 
     <li><a href="#">Action</a></li> 
     <li><a href="#">Another action</a></li> 
     <li><a href="#">Something else here</a></li> 
     <li class="divider"></li> 
     <li><a href="#">Separated link</a></li> 
     </ul> 
    </li> 
    </ul> 

затем в вашем пропущено ...

<div id="navbar-main"> 
    <!-- Fixed navbar --> 
    <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=".navbar-collapse"><span class="icon icon-heart" style="font-size:30px; color:#3498db;"></span></button> 
      <a class="navbar-brand hidden-xs hidden-sm" href="#home"><span class="icon icon-heart" style="font-size:18px; color:#3498db;"></span></a> 
     </div> 
     <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
       <li><a href="#home" class="smoothScroll">Home</a></li> 
       <li> <a href="#about" class="smoothScroll"> About</a></li> 
       <li> <a href="#houses" class="smoothScroll"> Houses</a></li> 
       <li> <a href="#products" class="smoothScroll"> Products</a></li> 
       <li> <a href="#contact" class="smoothScroll"> Contact</a></li> 
       <li><a href="#" class="language" rel="it-IT"><img src="assets/img/it_IT.png" alt="Italiano" /></a></li> 
       <li><a href="#" class="language" rel="en-US"><img src="assets/img/en_US.png" alt="English" /></a></li> 
      </ul> 
     </div><!--/.nav-collapse --> 

     <ul class="nav navbar-nav navbar-right"> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> 
       <ul class="dropdown-menu" role="menu"> 
        <li><a href="#">Action</a></li> 
        <li><a href="#">Another action</a></li> 
        <li><a href="#">Something else here</a></li> 
        <li class="divider"></li> 
        <li><a href="#">Separated link</a></li> 
       </ul> 
      </li> 
     </ul> 
    </div> 
</div> 

Answer 2

с некоторыми изменениями я был в состоянии получить то, что я хочу

example in the docs фактически показывает, что выпадающие нав нужно жить внутри складной DIV:

<div id="navbar-main"> 
    <!-- Fixed navbar --> 
    <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=".navbar-collapse"> 
        <span class="icon icon-heart" style="font-size:30px; color:#3498db;"></span> 
       </button> 
       <a class="navbar-brand hidden-xs hidden-sm" href="#home"><span class="icon icon-heart" style="font-size:18px; color:#3498db;"></span></a> 
      </div> 

      <div class="navbar-collapse collapse"> 

       <ul class="nav navbar-nav"> 
        <li><a href="#home" class="smoothScroll">Home</a></li> 
        <li> <a href="#about" class="smoothScroll"> About</a></li> 
        <li> <a href="#houses" class="smoothScroll"> Houses</a></li> 
        <li> <a href="#products" class="smoothScroll"> Products</a></li> 
        <li> <a href="#contact" class="smoothScroll"> Contact</a></li> 
        <li> <a href="#" class="language" rel="it-IT"><img src="assets/img/it_IT.png" alt="Italiano" /></a></li> 
        <li> <a href="#" class="language" rel="en-US"><img src="assets/img/en_US.png" alt="English" /></a></li> 
       </ul> 

       <ul class="nav navbar-nav navbar-right"> 
        <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> 
         <ul class="dropdown-menu" role="menu"> 
          <li><a href="#" class="language" rel="it-IT"><img src="assets/img/it_IT.png" alt="Italiano" /></a></li> 
          <li><a href="#" class="language" rel="en-US"><img src="assets/img/en_US.png" alt="English" /></a></li> 
         </ul> 
        </li> 
       </ul> 

      </div><!--/.nav-collapse --> 
     </div><!--/.container --> 
    </div> 
</div> 

Отказа: Я пытался просто исправить принятый ответ, но правка была отклонена.