menu a discesa bootstrap Due collegamenti sulla stessa riga orizzontale

Question

Sto utilizzando Bootstrap per creare menu a discesa. Una delle opzioni che vorrei avere sono due collegamenti sulla stessa riga orizzontale in un menu a discesa. Come potrei ottenere questo?

<div class = "navbar"> 
<div class = "navbar-inner"> 

<li class = "dropdown"> 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Dropdown Button 
     <b class="caret"></b> 
    </a> 

    <ul class = "dropdown-menu" role="menu" > 
     <li><a href="#">On First Row</a></li> 
     <li><a href="#">On Second Row</a></li> 
     <li><a href="#">On Third Row</a><a href="#">Also On Third Row</a></li> 
</ul> 
</li> 
</div> 
</div> 

Answer 1

tuo codice risolvere è qui >>>>>two links in one dropdown list item

html

---

<div class="navbar"> 
    <div class="navbar-inner"> 
     <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Dropdown Button 
     <b class="caret"></b> 
    </a> 

      <ul class="dropdown-menu" role="menu"> 
       <li><a href="#">On First Row</a> 
       </li> 
       <li><a href="#">On Second Row</a> 
       </li> 
       <li class="hz"><a href="#">On Third Row</a><a href="#">Also On Third Row</a> 
       </li> 
      </ul> 
     </li> 
    </div> 
</div> 

css

---

.open> ul>li.hz{ 
    display: inline-flex !important; 
} 

Answer 2

V'è un problema con eirenaios risposta:

Quando la discesa è contenuto all'interno di una barra di navigazione pieghevole, multiplo <li> sarà visualizzato su una riga (fino alla riga successiva) quando la barra di navigazione è compresso. Questo sembra molto brutto e confuso.

Ecco la soluzione, basata su eirenaios risposta, ma funziona anche per commutate navbars (ribaltabile) con menù a discesa:

https://plnkr.co/edit/JnsvKGiBokrI1frxC11P?p=preview

---

EDIT:

regola CSS aggiuntive:

.open > .dropdown-menu { 
    display: table-caption; 
} 

---

HTML (per lo più la stessa come l'originale, ma circondato da .navbar-collapse e ha aggiunto .navbar-header con un pulsante del menu hamburger per aprire il menu compresso):

<nav class="navbar navbar-default"> 
    <div class="navbar-header" data-toggle="collapse" data-target="#navbar0"> 
    <button type="button" class="navbar-toggle"> 
     <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> 
    </button> 
    </div> 
    <!-- toggled content --> 
    <div class="collapse navbar-collapse" id="navbar0"> 
    <ul class="nav navbar-nav"> 

     <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown Menu A <span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
      <li class="hz"> 
      <a href="#">Item A1 left</a> 
      <a href="#">Item A1 right</a> 
      </li> 
      <li class="hz"> 
      <a href="#">Item A2 left</a> 
      <a href="#">Item A2 right</a> 
      </li> 
      <li> 
      <a href="#">Single item A3</a> 
      </li> 
      <li class="hz"> 
      <a href="#">Item A3 left</a> 
      <a href="#">Item A3 right</a> 
      </li> 
     </ul> 
     </li> 

    </ul> 
    </div> 
</nav>