具有 2 个或更多 Div 的 Twitter Bootstrap 更广泛的下拉菜单

Posted 2023-03-05

【中文标题】具有 2 个或更多 Div 的 Twitter Bootstrap 更广泛的下拉菜单

【英文标题】：Twitter Bootstrap Broader Dropdown Menu with 2 or more Div

【发布时间】：2013-10-26 03:07:12

【问题描述】：

我想设计如下图所示的菜单：-

但我做不到，这是我的尝试：- http://jsfiddle.net/BqqqE/5/

代码如下：-

<div class="dropdown">
  <a class="dropdown-toggle btn btn-danger" data-toggle="dropdown" href="#">Dropdown trigger <b class="caret"></b></a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <li class="dropdown-submenu"><a tabindex="-1" href="index.php">Project</a>
        <div class="dropdown-menu">
            <div class="container">
                <div class="row-fluid">
                    <div class="span6">
                        <ul class="unstyled">
                            <li class="nav-header">Category A </li>
                            <li>Item A</li>
                            <li>Item B</li>
                        </ul>
                    </div>
                    <div class="span6">
                        <ul class="unstyled">
                            <li class="nav-header">Category A </li>
                            <li>Item A</li>
                            <li>Item B</li>
                        </ul>                        
                    </div>
                </div>
            </div>
        </div>
    </li>
  </ul>
</div>

Bootstrap 是否可以使用上述菜单？

谢谢

【问题讨论】：

不，您不能在仅列出内容的菜单中使用 div。您应该为此尝试弹出窗口或工具提示。

【参考方案1】：

看看this JSFiddle。我添加了课程dropdown-menu-tworows。您可以为子菜单设置width，但这不是必需的。

.dropdown-menu-tworows .span6 
  width: 49%;
  display: inline-block;

这是你想要的吗？

【讨论】：

这正是我所需要的。伟大的 ！谢谢