css - 如何将元素添加到 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>