小编Pip*_*100的帖子

背景和文本颜色导航栏 Blazor

我想更改 Blazor 中导航栏的背景颜色,但我找不到方法。我想这不会那么困难。有人能告诉我吗?

<div class="top-row pl-4 navbar navbar-dark bg-primary ">
    <a class="navbar-brand bg-primary" href="">Test</a>
    <button class="navbar-toggler bg-primary" @onclick="ToggleNavMenu">
        <span class="navbar-toggler-icon bg-primary"></span>
    </button>
</div>

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <ul class="nav flex-column">
        <li class="nav-item px-3 bg-primary">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </li>
        <li class="nav-item px-3 bg-primary oi-resize-height">
            <NavLink class="nav-link" href="hd">
                <span class="oi oi-list-rich" aria-hidden="true"></span> hd
            </NavLink>
        </li>
    </ul>
</div>
Run Code Online (Sandbox Code Playgroud)

background-color navbar bootstrap-4 blazor

7
推荐指数
2
解决办法
1万
查看次数

导航栏示例 Bulma 无法在移动 Blazor 上运行

我从 Blazor 网站中的 Bulma 网站复制了此示例导航栏。在网页上它工作正常,但在移动设备上导航栏汉堡没有响应。我是否错过了这个过程中至关重要的一步?例如,我需要对 .css 执行某些操作吗?

<nav class="navbar" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
        <a class="navbar-item" href="https://bulma.io">
            <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
        </a>

        <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
        </a>
    </div>

    <div id="navbarBasicExample" class="navbar-menu">
        <div class="navbar-start">
            <a class="navbar-item">
                Home
            </a>

            <a class="navbar-item">
                Documentation
            </a>

            <div class="navbar-item has-dropdown is-hoverable">
                <a class="navbar-link">
                    More
                </a>

                <div class="navbar-dropdown">
                    <a class="navbar-item">
                        About
                    </a>
                    <a class="navbar-item">
                        Jobs
                    </a>
                    <a class="navbar-item">
                        Contact
                    </a>
                    <hr class="navbar-divider">
                    <a class="navbar-item">
                        Report an issue
                    </a> …
Run Code Online (Sandbox Code Playgroud)

mobile navbar bulma blazor

3
推荐指数
1
解决办法
1838
查看次数

标签 统计

blazor ×2

navbar ×2

background-color ×1

bootstrap-4 ×1

bulma ×1

mobile ×1