Css 如何将元素添加到引导下拉列表项

我试图在下拉列表中为每个项目添加一个div，但是该项目会丢失引导样式

CSS

HTML

要继续使用相同的样式，它们需要一个作为root的标记，否则您可以增强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>


例2


项目一
更多霍里兹


项目一
更多霍里兹



要继续使用相同的样式，它们需要一个作为root的标记，否则您可以增强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>


例2


项目一
更多霍里兹


项目一
更多霍里兹



因为bootstrap有一个用于
的样式。下拉菜单>li>a
但不用于
。下拉菜单>li>div
，所以您必须从bootstrap
下拉菜单中复制所需的样式，并根据需要对其进行自定义

检查更新的

希望这有帮助。
因为bootstrap有一个样式用于
。下拉菜单>li>a
，但不用于
。下拉菜单>li>div
，所以您必须从bootstrap
下拉菜单中复制所需的样式，并根据需要进行自定义

检查更新的

希望这能帮上忙。
你为什么需要一个潜水舱？只是为了添加图标？如果是这样的话，你可以在
a
标签中自己做。我将图标放在一个div中，因为我想在悬停等区域添加一些样式。我使用@Ahmer的答案更新了我的小提琴（示例2）。我还添加了一些样式来对齐列表项并允许文本溢出。现在可以了，但我不是专业开发人员，所以我不确定这是否是最佳实践。为什么这里需要一个div？只是为了添加图标？如果是这样的话，你可以在
a
标签中自己做。我将图标放在一个div中，因为我想在悬停等区域添加一些样式。我使用@Ahmer的答案更新了我的小提琴（示例2）。我还添加了一些样式来对齐列表项并允许文本溢出。这现在可以了，但是我不是专业开发人员，所以我不确定这是否是最佳实践。
        <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>