时间戳

首页 > 解决方案 > 如何使用“条纹”表解决此 Blazor/Bootstrap 5 CSS 问题？

c# - 如何使用“条纹”表解决此 Blazor/Bootstrap 5 CSS 问题？

问题描述

尝试解决涉及 Bootstrap 5“表格条纹”和 Blazor Razor 组件显示的 CSS 问题。

我有一个简单的 Blazor/Bootstrap 5 页面，其中显示了在运行时从服务中提取的目录。内容被检索和显示。我确实看到了 Bootstrap CSS 片刻（页面加载时的初始 Flash），然后 Bootstrap 条纹 CSS 似乎被其他一些我无法在任何地方识别的动态样式所覆盖。在 Chrome/Edge 开发工具中，除了我指定的样式外，没有应用于表格的 CSS样式。该表最终成为一个简单的黑白表，这是不正确的。

我正在使用带有新条纹 CSS 的非常基本的表格格式，如下所示：

<table class="table table-striped table-success">
    <thead>
        <tr>
            <th width="2%" class="text-center" scope="col">ID</th>
            <th width="98%" scope="col">Detail</th>
        </tr>
    </thead>
@if (eventList.Any())
{
    foreach (var e in eventList.Take(5).ToList())
    {
        <tr>            
            <td>@e.blahblah</td>
            <td>@e.blahblah</td>
        </tr>
    }
}
</table>

动态表格内容 - Bootstrap 5 CSS 不起作用

我还使用这种方法消除了 TR/TD 生成导致问题的可能性（这只是为了测试我的理论）：

<table class="table table-striped table-success">
    <thead>
        <tr>
            <th class="text-center" scope="col">ID</th>
        </tr>
    </thead>
    <tr>
        <td class="text-center">
            @if (eventList.Any())
            {
                foreach (var e in eventList.Take(5).ToList())
                {
                    @e.blahblah
                }
            }
        </td>
    </tr>
</table>

但是，Bootstrap 5 CSS在渲染/显示时仍会被 Blazor 覆盖。在初始页面加载 Flash 之后（我在其中看到了一瞬间的样式），表格 CSS 变为简单的黑白格式。

为了建立一个控件，我加入了一些基本/静态代码，条纹表完美运行。没有问题。彩色条纹表正确显示。例如：

<tr>
    <td>Foo</td>
    <td>Too</td>
</tr>
<tr>
    <td>Foo</td>
    <td>Too</td>
</tr>
<tr>
    <td>Foo</td>
    <td>Too</td>
</tr>

静态表格内容 - Bootstrap 5 CSS 工作

这似乎是 Blazor 渲染引擎的错误 (?)。如何获取 Blazor 运行时表格内容以保留 Bootstrap 5 样式？什么是覆盖 CSS？

请指教。

标签： c#css.netblazorbootstrap-5

解决方案

感谢您提供有关 Uxonith 的信息。作为答案，问题只是 / 内容的缺失包装。例如...

<table class="table table-striped table-success">
    <thead>
        <tr>
            <th width="2%" class="text-center" scope="col">ID</th>
            <th width="98%" scope="col">Detail</th>
        </tr>
    </thead>
    <tbody>
        @if (eventList.Any())
        {
            foreach (var e in eventList)
            {
                <tr>
                    <td class="text-center">@e.Id</td>
                    <td>@e.EventInfo</td>

                </tr>
            }
        }
    </tbody>
</table>

推荐阅读