bootstrap Dropdown-Menü Zwei Links in derselben horizontalen Zeile

Question

Ich verwende Bootstrap, um Dropdown-Menüs zu erstellen. Eine der Optionen, die ich haben möchte, ist zwei Links in der gleichen horizontalen Reihe in einem Dropdown-Menü. Wie würde ich das erreichen?

<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

Ihr gelöst-Code ist hier >>>>>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

Es gibt ein Problem mit der Antwort von eirenaios:

Wenn das Dropdown in einer reduzierbaren Navigationsleiste enthalten ist, werden mehrere <li> in einer Zeile angezeigt (bis zur nächsten Zeile), wenn die Navigationsleiste ausgeblendet ist. Das sieht sehr hässlich und verwirrend aus. Hier

ist die Lösung, basierend auf eirenaios Antwort, funktioniert aber auch für getoggelt (zusammenklappbar) NavBars mit Dropdown-Listen:

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

---

EDIT:

Zusätzliche CSS-Regel:

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

---

HTML (meist das gleiche wie das Original, aber von .navbar-collapse umgeben und hinzugefügt .navbar-header mit einem Hamburger-Menü, um das zusammengeklappte Menü zu öffnen):

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