Bootstrap - 下拉列表中的自定义内容？

Question

正如标题所述，我希望只有一个下拉列表，然后在另一个下拉菜单中有其他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子下拉列表中有自定义内容？这种方式造成了数英里的问题。

Answer 1

你可以这样想：

<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/

Answer 2

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

Answer 3

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>