önyükleme açılan menü Ben açılır menüler yapmak için Bootstrap kullanıyorum aynı yatay satır

Question

İki bağlantıları. Sahip olmak istediğim seçeneklerden biri, bir açılır menüdeki aynı yatay satırdaki iki bağlantıdır. Bunu nasıl başarabilirim?

<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

Kişisel çözüldü Kod burada >>>>>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

Eirenaios yanıtıyla ilgili bir sorun var:

Açılır kapanır bir navbar içinde yer aldığında, navbar daraltıldığında bir satırda (bir sonraki satıra kadar) birden çok <li> gösterilecektir. Bu çok çirkin ve kafa karıştırıcı görünüyor. İşte

eirenaios yanıta göre çözüm, ancak dropdowns ile birlikte değiştirilir (katlanabilir) NavBars için de çalışır:

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

---

DÜZENLEME:

Ek CSS kuralı:

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

---

HTML (çoğunlukla orijinal ile aynı, ancak .navbar-collapse çevrili ve çökmüş menüyü açmak için bir hamburger menü düğmesi ile .navbar-header eklendi):

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