css - 为什么 Bootstrap 4 中的 pills 没有任何样式?

标签 css menu bootstrap-4

我试图用 Bootstrap 4 pills 制作垂直导航栏,但当我尝试使用它们时,我无法显示样式。它们看起来都像常规链接。

没有样式的药丸:
Pills without style

<ul class="nav nav-pills flex-column">
<li class="nav-item">
    <a href="<?php echo ADMIN_URL;?>home" class="nav-link">Admin Dashboard</a>
</li>
<li class="nav-item">
<a href="<?php echo ADMIN_URL;?>user-list/1" class="nav-link">Users</a>
</li>
<li class="nav-item">
    <a href="<?php echo ADMIN_URL;?>category-list/1" class="nav-link">Categories</a>
</li>
<li class="nav-item">
    <a href="<?php echo ADMIN_URL;?>car-list/1" class="nav-link">Cars</a>
</li>
<li class="nav-item">
    <a href="<?php echo MAIN_URL;?>" class="nav-link">Main Page</a>
</li>

最佳答案

只有活跃的链接才能获得样式

    <ul class="nav nav-pills flex-column">
    <li class="nav-item">
        <a href="<?php echo ADMIN_URL;?>home" class="nav-link active">Admin Dashboard</a>
    </li>
    <li class="nav-item">
    <a href="<?php echo ADMIN_URL;?>user-list/1" class="nav-link">Users</a>
    </li>
    <li class="nav-item">
        <a href="<?php echo ADMIN_URL;?>category-list/1" class="nav-link">Categories</a>
    </li>
    <li class="nav-item">
        <a href="<?php echo ADMIN_URL;?>car-list/1" class="nav-link">Cars</a>
    </li>
    <li class="nav-item">
        <a href="<?php echo MAIN_URL;?>" class="nav-link">Main Page</a>
    </li>
   </ul>

这意味着只有包含事件类的元素才具有样式(例如我的答案代码中的第一个条目)

More Info

关于css - 为什么 Bootstrap 4 中的 pills 没有任何样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53203297/

相关文章:

css - 将 -webkit-tap-highlight-color 应用于空白会导致 phonegap 应用程序出现故障

html - 为什么在这段代码中 Height : auto and Height: 100% on same element

javascript - 有人知道能够固定位置的 jQuery 鱼眼/停靠导航插件吗?

javascript - 单击不起作用滑出菜单栏

css - bootstrap 为选择下拉菜单取全宽

html - 封面页高度设置为 100% 一半

c - c中的菜单系统

css - 响应式列表 - 将元素从两列合并为一列

css - 为什么 Bootstrap 4 轮播自动裁剪图像高度?

html - 元素对齐问题