Menu rozwijane bootstrap Dwa łącza w tym samym poziomym wierszu

Question

Używam Bootstrap do rozwijania menu. Jedną z opcji, które chciałbym mieć, są dwa łącza w tym samym poziomym wierszu w rozwijanym menu. Jak to osiągnąć?

<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

Twój rozwiązany Code jest tutaj >>>>>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

Występuje problem z odpowiedzią eirenaios:

Gdy rozwijana lista znajduje się w składanym pasku nawigacyjnym, wiele linii <li> zostanie wyświetlonych w jednej linii (do zawinięcia do następnej linii) po zwinięciu paska nawigacyjnego. To wygląda bardzo brzydko i myląco.

Oto rozwiązanie, oparte na eirenaios odpowiedź, ale działa również dla przełączana (składane) NavBars z rozwijanego menu:

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

---

EDIT:

Dodatkowa reguła CSS:

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

---

HTML (w większości takie same jak w oryginale, ale otoczony .navbar-collapse i dodał .navbar-header z przycisku menu hamburger, aby otworzyć menu zwinięty):

<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>