7

我正在使用 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>
4

2 回答 2

6

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

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;
}
于 2014-07-27T20:36:17.643 回答
3

eirenaios 的回答有问题：

当下拉菜单包含在可折叠的导航栏中时，当导航栏折叠时，多个<li>将显示在一行上（直到它换到下一行）。这看起来非常丑陋和令人困惑。

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

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

编辑：

附加 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>
于 2017-04-04T14:56:37.880 回答