bootstrap dropdown menu Two links on same horizontal row

Question

I'm using Bootstrap to make drop down menus. One of the options I would like to have is two links on the same horizontal row in a dropdown menu. How would I achieve this?

<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

Your solved Code is here >>>>> 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

There is a problem with eirenaios answer:

When the dropdown is contained within a collapsible navbar, multiple <li> will be shown on one line (until it wraps to the next line) when the navbar is collapsed. This looks very ugly and confusing.

Here is the solution, based on eirenaios answer, but works also for toggled (collapsible) navbars with dropdowns:

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

---

EDIT:

Additional CSS rule:

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

---

HTML (mostly the same as the original, but surrounded by .navbar-collapse and added .navbar-header with a hamburger menu button to open the collapsed menu):

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