Bootstrap 4弹出菜单显示由css设置为无的项目符号

Posted 2023-02-16

【中文标题】Bootstrap 4弹出菜单显示由css设置为无的项目符号

【英文标题】：Bootstrap 4 Popover Menu Showing bullet which setted as none by css

【发布时间】：2018-01-25 10:09:08

【问题描述】：

我正在尝试使用 Bootstrap 4 弹出菜单弹出类别列表。

下面是我的代码

 <a tabindex="0" class="nav-link catdropdown" role="button" data-toggle="popover" data-placement="bottom">Kategoriler</a>

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

下面还有JS代码

$('[data-toggle="popover"]').popover(
                           trigger: 'focus',
                            html:true,
                            content : function() 
                                return $('#categoryPopOverMenu').html();

                                                   
                             ); 

请看下面的图片，您可以在图片的左侧看到我的列表没有项目符号。您还可以在图片右侧看到，当我在弹出窗口中显示我的列表时会出现一个黑色子弹

https://i.hizliresim.com/az01LB.png

谢谢你。

【问题讨论】：

你的 li 标签添加了项目符号

【参考方案1】：

感谢您的回复。下面的代码运行良好

<a tabindex="0" class="nav-link catdropdown" role="button" data-toggle="popover" data-placement="bottom">Kategoriler</a>
              <ul class="list-group" id="categoryPopOverMenu" style="padding:0px;display:none;width:70px;">
                         @foreach($categories as $category)
                             <li class="list-group-item list-group-item-info justify-content-between" style="padding:0px">
                               <a class="dropdown-item" href="#">$category['category_name'] @if ($settings['show_category_movie_count'] === 1) <span class="badge badge-default badge-pill pull-right" style="font-size:11px; font-weight:normal">$category['movies_count']</span>@endif</a>
                             </li>
                         @endforeach
              </ul>  

【参考方案2】：

    Obviously your css is overriding. 
    Try adding this to your css:

    .popover-title 
        color: blue;
        font-size: 15px;
    
    .popover-content 
        color: red;
        font-size: 10px;
    
See this link this might help you.

访问Apply CSS to popover in Bootstrap

【讨论】：

Sooo，你得到了关于链接只回答的错误......然后你决定绕过它......

请阅读How should duplicate questions be handled?