如何将元素添加到Bootstrap下拉列表项目中

Question

我正在尝试在下拉列表中向每个项目添加一个DIV，但是该项目将失去Bootstrap样式。

CSS

.ul.dropdown-menu li {
    display: inline-block !important;
}

html

<li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown">Example 2<span class="caret"></span></a>
    <ul class="dropdown-menu">
        <li>
            <div>
                <a>Item One</a>
                <div>
                    <i class="material-icons " style="font-size:18px">more_horiz</i>
                </div>
            </div>
        </li>
    </ul>
</li>

我已经在附加元素之前和之后创建了下拉列表的示例，以演示问题。https://jsfiddle.net/rob_h/nqu621vm/

Answer 1

对于继续相同的样式，它们需要标签与根，否则您可以增强CSS

        <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown">Example 2
    <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li>
      <a>
       <div>
         Item One
         <div>
          <i class="material-icons " style="font-size:18px">more_horiz</i>
          </div>
          </div></a>  
        </li>
         <li>
         <a>
       <div>
         Item One
         <div>
          <i class="material-icons " style="font-size:18px">more_horiz</i>
          </div>
          </div></a>  
        </li>
        </ul>
  </li>

Answer 2

因为Bootstrap具有.dropdown-menu>li>a的样式，但对于.dropdown-menu>li>div没有样式，因此您必须从Bootstrap dropdown复制所需的样式并根据需要进行自定义。

检查已更新的JSFIDDLE。

希望这会有所帮助。