时间戳

首页 > 解决方案 > 为什么 Bootstrap 4 中的药丸没有样式？

css - 为什么 Bootstrap 4 中的药丸没有样式？

问题描述

我试图用 Bootstrap 4 药片制作一个垂直导航栏，但是当我尝试使用它们时，我无法展示这种风格。它们看起来都像常规链接。

没有样式的药丸：
没有风格的药丸

<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>

标签： cssmenubootstrap-4

解决方案

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

    <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>

这意味着只有包含活动类的元素具有样式（例如我的答案代码中的第一个条目）

更多信息

推荐阅读