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

您解决的代码在这里＆gt;＆gt;＆gt;＆gt;＆gt; 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答案存在问题：

当下拉列表包含在可折叠导航栏中时，当导航栏折叠时，多行<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>  <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>

bootstrap下拉菜单同一水平行上的两个链接

2 个答案: