[英]how to change the line color in the NavBar toggle button in react-bootstrap?
Try changing the variant to dark so that the hamburger will display as light to contrast with the "dark" variant of the navbar.尝试将变体更改为深色,以便汉堡包显示为浅色,与导航栏的“深色”变体形成对比。
<Navbar bg="transparent" expand="lg" variant="dark">
I just struggled with this for about an hour.我只是为此挣扎了大约一个小时。 Trying to change the stroke value in my sass to override the bootstrap default wasn't working for me, nor was any other deeper specificity rule that I tried.尝试更改 sass 中的笔划值以覆盖引导默认值对我不起作用,我尝试过的任何其他更深层次的特异性规则也不起作用。
What worked: Use a different background image and set it to.important, For example, I used the bootstrap "list" icon svg(downloaded from their site to an asset folder): which I set as the background for the same class that was being generated by bootstrap in the DOM:什么工作:使用不同的背景图像并将其设置为.important,例如,我使用引导程序“列表”图标svg(从他们的站点下载到资产文件夹):我将其设置为相同class的背景由 DOM 中的引导程序生成:
.navbar-light .navbar-toggler-icon {
background-image: url("../assets/list.svg") !important;
}
Then, in the actual SVG file (click the file in your code editor to edit), change the "fill" or "stroke" attributes to whatever color you like.然后,在实际的 SVG 文件中(单击代码编辑器中的文件进行编辑),将“填充”或“描边”属性更改为您喜欢的任何颜色。 Easy peasy:十分简单:
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-list" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
</svg>
Try the adding a class to the button (or just override the current class of the hamburger button) and do the following:尝试将 class 添加到按钮(或仅覆盖汉堡按钮的当前 class)并执行以下操作:
.navbar-hamburger {
background-image: url("data:image/svg+xml,<svg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'><path stroke='rgba(255,255,255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/></svg>");
}
And replace the stroke color.并替换描边颜色。 This was tested on plain bootstrap 4, I hope it works!这是在普通的引导程序 4 上测试的,我希望它有效!
If you want background is dark, but the hamburger is light, try this如果你想要背景很暗,但汉堡包很亮,试试这个
<Navbar bg="dark" expand="lg" variant="dark">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.