如何更改面包屑的颜色？助推器 v5.3

Question

Soy nuevo usando boostrap y estoy haciendo un navbar. Soy nuevo usando boostrap y estoy haciendo un navbar。 Me pareció agradable usar breadcrumb para separar lo que terminará siendo el 'menu' pero el color predeterminado del breadcrumb es negro y yo tengo el navbar con bg-dark, por lo que casi es imperceptible.我 pareció agradable usar breadcrumb para separar lo que terminará siendo el 'menu' pero el color predeterminado del breadcrumb es negro y yo tengo el navbar con bg-dark, por lo que casi es imperceptible。

Hello, I'm trying to change the color of breadcrumbs to white, but when i write您好，我正在尝试将面包屑的颜色更改为白色，但是当我写

--bs-breadcrumb-divider-color: white;

doesn't work.不起作用。 I also tried with an external css like this:我也试过像这样使用外部 css：

.breadcrumb >.active a {
    color: white;
 }

What should I do?我应该怎么办？ What im doing wrong?我做错了什么？ im new using boostrap.我是使用 boostrap 的新手。 THX谢谢

////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////// ///////////////////////////////

Hola, estoy intentando cambiar el color de los breadcrumbs a blanco, pero cuando escribo: Hola, estoy intando cambiar el color de los breadcrumbs a blanco, pero cuando escribo:

--bs-breadcrumb-divider-color: white;

no funciona.没有功能。 También intente con un archivo externo css como este: También intente con un archivo externo css como este：

.breadcrumb >.active a {
    color: white;
 }

Qué debería de hacer? Qué debería de hacer？ Qué estoy haciendo mal? Qué estoy haciendo mal？ soy nuevo usando boostrap.大豆 nuevo usando 助推器。 THX谢谢

HTML HTML

 <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent" aria-label="breadcrumb" style="--bs-breadcrumb-divider: '|';--bs-breadcrumb-divider-color: white;">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item nav-link me-3 active">
                        <a class="text-light" href="#">Home</a>
                    </li>
                    <li class="breadcrumb-item nav-link me-3">
                        <a class=" text-light" href="#">Page one</a>
                    </li>
                    <li class="breadcrumb-item nav-link me-3">
                        <a class="text-light" href="#">Page two</a>
                    </li>
                    <li class="breadcrumb-item nav-link me-3">
                        <a class="text-light" href="#">Page three</a>
                    </li>                    
                </ol>
            </div>

CSS CSS

.breadcrumb >.active a {
    color: white;
 }

Answer 1

Here you need to override bootstraps variable --bs-breadcrumb-divider-color .在这里你需要覆盖 bootstraps 变量--bs-breadcrumb-divider-color 。 This devider is made on li ::before pseudo element and if you inspect it you can see all variables that you can then override.这个 devider 是在 li ::before伪元素上制作的，如果你检查它，你可以看到所有你可以覆盖的变量。

 .breadcrumb >.active { --bs-breadcrumb-divider-color: red;important; }

 <head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script> </head> <body class="p-3 m-0 border-0 bd-example"> <:-- Example Code --> <nav aria-label="breadcrumb" style="--bs-breadcrumb-divider; '|';"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item active"><a href="#">Library</a></li> <li class="breadcrumb-item" aria-current="page"><a href="#">page 1</a></li> <li class="breadcrumb-item" aria-current="page"><a href="#">page 2</a></li> </ol> </nav> <!-- End Example Code --> </body> </html>

如何更改面包屑的颜色？助推器 v5.3

问题描述

1 个解决方案

解决方案1
0 2022-12-29 23:05:52

如何更改面包屑的颜色？ 助推器 v5.3

问题描述

1 个解决方案

解决方案1 0 2022-12-29 23:05:52

如何更改面包屑的颜色？助推器 v5.3

解决方案1
0 2022-12-29 23:05:52