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文本裝飾時才需要。