menu thả xuống bootstrap Hai liên kết trên cùng một hàng ngang

Question

Tôi đang sử dụng Bootstrap để tạo các menu thả xuống. Một trong những tùy chọn tôi muốn có là hai liên kết trên cùng một hàng ngang trong menu thả xuống. Làm thế nào tôi sẽ đạt được điều này?

<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

Mã giải quyết của bạn là ở đây >>>>>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

Có vấn đề với câu trả lời eirenaios:

Khi trình đơn thả xuống nằm trong một thanh điều hướng có thể thu gọn, nhiều <li> sẽ được hiển thị trên một dòng (cho đến khi nó kết thúc dòng tiếp theo) khi thanh điều hướng bị sập. Điều này trông rất xấu xí và khó hiểu.

Dưới đây là giải pháp, dựa trên câu trả lời eirenaios, nhưng cũng làm việc cho toggled NavBars (collapsible) với Dropdowns:

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

---

EDIT:

bổ sung quy tắc CSS:

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

---

HTML (chủ yếu là giống như bản gốc, nhưng được bao quanh bởi .navbar-collapse và thêm .navbar-header với một nút menu bánh hamburger để mở menu sụp đổ):

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