引导下拉菜单两个链接在同一水平行

Question

我使用Bootstrap制作下拉菜单。我想要的选项之一是在同一水平行下拉菜单的两个链接。我该如何做到这一点?

<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

您解决的代码在这里>>>>> 两个链接在一个下拉列表项

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

有一个问题。

当下拉菜单包含在可折叠导航条中时，当导航条折叠时，多个<li>将显示在一行(直到它换行到下一行)。这看起来非常丑陋和混乱。

这是解决方案，基于eirenaios的答案，但也适用于带下拉菜单的切换(可折叠)导航条:

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

预览

---

编辑:

附加CSS规则:

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

---

HTML(大部分与原来相同，但被.navbar-collapse包围，并添加了.navbar-header与汉堡包菜单按钮打开折叠菜单):

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