3

正如标题所述，我希望有一个下拉菜单，然后在另一个下拉子菜单中有其他 HTML 内容，使下拉菜单充当 HTML 内容的弹出窗口。到目前为止，我遇到的问题是，一旦我尝试将 div 和代码放入UL二级下拉列表的标签中，它在悬停时就不再可见。这是我当前的标记，

<li class="dropdown">
  <a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">GAMES &nbsp;<i class="icon-caret-down"></i></a>
  <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
    <li role="presentation" class="dropdown-submenu"><a role="menuitem" tabindex="-1" href="#">Battlefield 3</a>
      <ul class="dropdown-menu">
        <div>
          <h1 style="color: #333;">Things</h1>
        </div>
      </ul>
    </li>

老实说，到目前为止，标记是可怕的，但是有没有更简单的方法可以在 Bootstrap 子下拉列表中包含自定义内容？这种方式导致了数英里的问题。

4

3 回答 3

4

你可以这样想：

<ul class="unstyled">
    <li class="dropdown">
      <a class="dropdown-toggle btn" id="drop4" role="button" data-toggle="dropdown" href="#">GAMES &nbsp;<b class="caret"></b></a>
      <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
        <li role="presentation" class="dropdown-submenu"><a role="menuitem" tabindex="-1" href="#">Battlefield 3</a>
          <ul class="dropdown-menu">
            <li>
              <div class="custom">
                <h1 style="color: #333;">Things</h1>
              </div>
            </li>
          </ul>
        </li>
      </ul>
    </li>
</ul>

这使得菜单在语义上更加正确和有效......我觉得你在 CSS 中可能需要的东西是：

.custom {padding: 0 10px;}
.custom h1 {font-size: 1.5em; margin: 0; padding: 0;}

预习

小提琴：http: //jsfiddle.net/praveenscience/yEJ3c/

于 2013-11-30T19:13:41.843 回答
1

如果您不需要其他孩子并且您只是在寻找丰富的下拉菜单，那么您可能希望使用Popover组件而不是 Dropdown 组件。

于 2015-10-06T23:19:02.333 回答
0

Bootstrap 4 的更新 - 现在可以轻松地将自定义 HTML 添加到下拉列表中：

        <div class="dropdown">
            <button class="btn btn-secondary dropdown-toggle btn-sm" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropdown
            </button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                <a class="dropdown-item active" href="#">Option one</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
                <a class="dropdown-item" href="#">
                    <div class="row">
                        <div class="col">Html</div>
                        <div class="col">Content</div>
                        <div class="col">Here</div>
                    </div>
                </a>
            </div>
        </div>
于 2021-03-17T10:01:03.483 回答