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><a href="#">On Third Row</a><a href="#">Also On Third Row</a></li>
</ul>
</li>
</div>
</div>

您解决的代码在这里>>>

html

---

---

eirenaios的回答有问题：

当下拉菜单包含在可折叠导航栏中时，当导航栏折叠时，一行上将显示多个

（直到它换行到下一行）。这看起来非常难看和混乱

以下是基于eirenaios答案的解决方案，但也适用于带有下拉菜单的切换（可折叠）导航栏：

---

编辑：

附加CSS规则：

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

---

HTML（基本上与原来的相同，但被

.navbar collapse

包围，并添加了

.navbar header

，带有汉堡菜单按钮以打开折叠菜单）：

您的购买方式有什么问题？这应该将它们放在同一行。@brb编码Hmm…在检查了“第三行”的元素后，它看起来像是引导程序指向CSS中带有

下拉菜单a

的链接，该菜单设置

显示：块

，并具有

空白：nowrap

。手动覆盖到

内联块

，关闭

空白

并将宽度设置为50%后，我能够并排获得两个链接……但是您知道如何让它们扩展容器的大小吗？我觉得有点奇怪，容器的下拉菜单是固定宽度的，不会自动调整答案的大小（应该为任何包含的链接提供上下文）[.在这种情况下，你提到另一个答案是不正确的，但你没有提供任何关于你修改了什么的解释。如果链接不可用，答案就变得无关紧要了。谢谢你，霍斯，我刚刚编辑了我的帖子，其中包含了缺失的信息。

.open> ul>li.hz{
    display: inline-flex !important;
}

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

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