如何更改bootstrap navbar的颜色 03 社区 03 Ruby China

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何更改bootstrap navbar的颜色 03 社区 03 Ruby China相关的知识,希望对你有一定的参考价值。

参考技术A 到bootstrap的官网定制自己的风格,http://getbootstrap.com/customize/
使用基于bootstrap的主题,这里有个站点有一些bootstrap的免费主题http://bootswatch.com/

我是基于bootstrap3作答的,2.x也是差不多的

如何在 Bootstrap 5 中更改导航栏品牌 a:hover 背景颜色

【中文标题】如何在 Bootstrap 5 中更改导航栏品牌 a:hover 背景颜色【英文标题】:How to change the navbar-brand a:hover background-color in Bootstrap 5 【发布时间】:2021-08-11 03:20:21 【问题描述】:

我正在使用 Bootstrap 5 构建一个 ruby​​ on rails 应用程序。我试图在悬停时更改 navbar-brand 类锚的背景颜色。我可以很好地更改常规的非锚定背景颜色。但是为什么 a:hover 背景没有改变呢?

  .navbar-brand background-color: #0f0;  /* works */
  .navbar-brand a:hover background-color: #f00; /* doesn't work */

这可能很简单。我只是没看到。 谢谢

【问题讨论】:

您是否查看了浏览器中的检查器窗格,以查看样式窗格是否提供任何类型的信息i,说明为什么该规则可能会被覆盖? 您是否尝试过为您的锚标签添加一个类、唯一的类并使用它,例如<a class="unique-class"> 然后.unique-class:hover 【参考方案1】:

可能是因为 Bootstrap 的 css 有has more weight

T尝试添加!important

   a.navbar-brand:hover background-color: #f00 !important; 

【讨论】:

!important 没有修复它。似乎它没有在锚点上接班。如果我只是使用 a:hover 而不使用实际的 .navbar-brand 类,它可以工作(但也会为每个锚点更改它。)如果我将它包装在一个 div 中它可以工作。 实际上这似乎不适用于非引导锚。示例:w3schools.com/code/tryit.asp?filename=GQQURTGHXALQ .one:hover background-color: yellow; 在链接的 w3schools 代码中工作,因为 a 标签的类为 .one 它没有。 .one 应该是黄色的。没有类的样式是绿色的。 确实如此,检查一下:w3schools.com/code/tryit.asp?filename=GQQV12H0BW2K,确保您按照代码片段中的指示先按运行

以上是关于如何更改bootstrap navbar的颜色 03 社区 03 Ruby China的主要内容,如果未能解决你的问题,请参考以下文章

如何更改bootstrap navbar的颜色 03 社区 03 Ruby China

如何在 Bootstrap 5 中更改导航栏品牌 a:hover 背景颜色

Twitter Bootstrap 中的导航栏颜色

Bootstrap:更改背景颜色下拉菜单

Bootstrap 4 导航栏颜色

如何在 Xamarin 中更改 MasterMainPage 的 NavBar 颜色