用于引导手风琴的CSS

Question

所以我对 css 和 bootstrap 还很陌生，并且在我的视图页面中添加了一个手风琴。我尝试过改变原来的CSS，但没有成功！

<div class="accordion accordian-flush" id="accordionExample">
@foreach (var s in Model.Data)
{
        <div class="accordion-item">

            <h2 class="accordion-header">

                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse@(s.Id)"
                    aria-expanded="false" aria-controls="collapse@(s.Id)">
                    @s.Name
                </button>
            </h2>
            <div id="collapse@(s.Id)" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                <div class="accordion-body">
                   <p><strong>Email: </strong>@s.Email</p>
                <p><strong>Manager: </strong>A name</p>

                <p><a [email protected]("admin") class="btn-add p-0 m-0" asp-action="Details"
                asp-route-id="@s.Id"
                aria-label="see shop details">Details</a></p> 
                </div>
            </div>
                
        </div>

}
</div>

这是我的视图页面，我将向您展示我尝试在样式表中添加的内容...

.accordion{
  --bs-accordion-btn-bg:#1D976C;
  --bs-accordion-active-bg: red;
}

最后这些是我的_layout 中的链接

 <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/EmployeeEntry.Web.styles.css" asp-append-version="true" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">

我已经厌倦了观看 YouTube 教程，但它们显示了类似的内容，我只是不知道下一步该做什么！任何帮助将不胜感激

Answer 1

该问题可能与 bootstrap CSS 版本有关。

尝试打开 /lib/bootstrap/dist/css/bootstrap.min.css 文件并检查 Bootstrap 版本，您可能使用 Bootstrap v5.1.0 版本，如下所示：

使用以上版本时，

--bs-accordion-active-bg

将不起作用。

要解决此问题，您可以尝试使用 [email protected] 版本，而不是 v5.1.0 版本。

您可以修改代码如下：将 bootstrap.min.css 文件替换为最新的 bootstrap CDN 参考。

@*     <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" /> *@
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

并为手风琴按钮添加

collapsed

类。

<div class="accordion accordian-flush" id="accordionExample">
    @foreach (var s in Model.Data)
    {
        <div class="accordion-item"> 
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse@(s.Id)"
                        aria-expanded="false" aria-controls="collapse@(s.Id)">
                    @s.Name
                </button>
            </h2> 
            <div id="collapse@(s.Id)" class="accordion-collapse collapse " data-bs-parent="#accordionExample">
                <div class="accordion-body">
                    <p><strong>Email: </strong>@s.Email</p>
                    <p><strong>Manager: </strong>A name</p>

                    <p>
                        <a [email protected]("admin") class="btn-add p-0 m-0" asp-action="Details"
                           asp-route-id="@s.Id"
                           aria-label="see shop details">Details</a>
                    </p>
                </div>
            </div> 
        </div> 
    }
</div> 

结果如下：