Bootstrap 4 Popover菜单显示已设为none的CSS项目符号问题

看起来你遇到了Bootstrap Popover里自定义无项目符号列表失效的问题，别担心，这是因为Popover的默认样式会覆盖你自己的类样式，我给你几个实用的解决方案：

方案1：提升CSS选择器优先级，强制覆盖默认样式 #

Bootstrap的Popover会把内容渲染到独立的.popover-content容器里，你的no-bullet类优先级不够，所以没生效。你可以修改CSS，让样式能精准作用到Popover内的列表：

/* 针对Popover内的无序列表移除项目符号 */
.popover-content .no-bullet,
.popover-content .no-bullet li {
    list-style-type: none;
    padding-left: 0; /* 可选：移除默认内边距，让列表对齐更整齐 */
}

这样写能确保你的样式优先级高于Bootstrap的默认列表样式。

方案2：在JS中直接给内容添加内联样式 #

如果你不想额外写CSS，也可以在Popover初始化时，给列表加上内联样式来强制隐藏项目符号：

$('[data-toggle="popover"]').popover({
  trigger: 'focus',
  html:true,
  content : function() {
    // 克隆原始列表并添加内联样式
    const $menu = $('#categoryPopOverMenu').clone();
    $menu.attr('style', 'list-style-type: none; padding-left: 0;');
    return $menu.html();
  }
});

这种方式直接在内容注入前处理，能快速解决问题。

方案3：检查并覆盖Bootstrap的默认列表规则 #

你可以用浏览器开发者工具（F12）查看Popover内ul的样式，找到是哪条Bootstrap规则在控制项目符号。比如如果看到：

.popover ul {
    list-style-type: disc;
}

那你只需要在自己的CSS里写：

.popover ul.no-bullet {
    list-style-type: none;
}

这样就能精准覆盖默认样式。

额外小提示 #

另外，我注意到你的HTML结构里，所有分类链接都放在同一个li里了，这不符合语义化规范，建议改成每个分类对应一个li：

<ul class="no-bullet" id="categoryPopOverMenu">
  @foreach($categories as $category)
  <li class="nav-item">
    <a class="dropdown-item" href="#">{{$category['category_name']}} @if ($settings['show_category_movie_count'] === 1) ({{$category['movies_count']}}) @endif</a>
  </li>
  @endforeach
</ul>

这样结构更清晰，样式控制也更方便。

内容的提问来源于stack exchange，提问作者Metin Genç