如何移除List group组件中列表项的项目符号

嘿，这个问题其实是因为你在list-group-item里面嵌套了<li>标签导致的——<li>是HTML列表元素，浏览器默认会给它添加项目符号，而且这也不符合Bootstrap list-group组件的使用规范哦。下面给你两种解决方案：

方案一：符合Bootstrap规范的正确写法（推荐） #

Bootstrap的list-group组件设计上是用块级元素（比如<div>、<a>）作为子项，不需要嵌套<li>。你可以直接把内部的<li>标签去掉，换成纯文本或者用<div>包裹，这样自然就不会有项目符号了：

<div id="menu" class="list-group">
  <div class="menu-item menu-level-0 sub-menu list-group-item">Fruits</div>
  <div class="menu-item menu-level-0 sub-menu list-group-item">Vegetables</div>
  <div class="menu-item menu-level-0 sub-menu list-group-item">Meats</div>
</div>

这种方法不仅解决了项目符号问题，还符合组件的语义设计，后续使用Bootstrap的样式也不会出现冲突。

方案二：用CSS强制移除项目符号（不推荐，仅当必须保留<li>时使用） #

如果你因为某些原因一定要保留<li>标签，可以通过CSS来移除它的默认项目符号样式：

/* 针对你的.menu-item下的li设置 */
.menu-item li {
  list-style-type: none; /* 移除项目符号 */
  margin: 0; /* 可选：移除li默认的外边距 */
  padding: 0; /* 可选：移除li默认的内边距 */
}

或者更通用的写法，针对所有list-group-item里的li：

.list-group-item li {
  list-style: none;
}

简单总结下：优先用方案一，既规范又省心，方案二只是临时的补救办法哦～

内容的提问来源于stack exchange，提问作者user79074