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

时间:2013-04-05 22:15:49

标签: html twitter-bootstrap

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

2 个答案:

答案 0 :(得分:5)

您解决的代码在这里&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;
}

答案 1 :(得分:1)

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>