Joomla 4 与 Bootstrap 5 模板自定义 css 不工作

Question

我为我的 Joomla 4 网站制作了一个基本的 bootstrap 5 模板，并尝试自定义导航栏，但 css 添加到 user.css 一些如何不起作用。

我看到 user.css 已加载到页面的源代码中，还看到了网络服务器上 user.css 文件中的代码。

这是我的导航栏代码和 CSS：

用户.css

nav .navbar-dark .nav-link {
  text-decoration: none !important;
}

索引.php

<nav class="navbar navbar-dark bg-dark navbar-expand-lg">
  <div class="container-fluid">
    <a href="" class="navbar-brand"><?php echo ($sitename); ?></a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainmenu" aria-controls="mainmenu" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <!-- Put menu links in the navbar -->
    <?php if ($this->countModules('menu')): ?>
    <div class="collapse navbar-collapse" id="mainmenu">
      <jdoc:include type="modules" name="menu" style="none" />
    </div>
    <?php endif; ?>
  </div>
</nav>

https://jsfiddle.net/nLp4je5m/

Answer 1

text-decoration: underline应用于a标签。 因此你需要

1. 删除nav.navbar-dark和之间的空格
2. 添加a

nav.navbar-dark .nav-link a {
  text-decoration: none;
}

删除该行。 !important仅在您有其他 CSS 定义修改元素a文本装饰时才需要。