在 bootstrap-vuejs 中将背景颜色更改为导航栏

Question

根据documentation，导航栏的样式可以设置如下：

<b-navbar toggleable="lg" type="dark" variant="info">
<!-- Or -->
<b-navbar toggleable="lg" type="dark" variant="dark">

无论如何，只需更改 type 和 variant 属性即可。但是，我想设置自定义背景颜色，例如 #AABB55。我找不到简单的方法。

此外，当您看到文档和 source code 时，您没有太多选择。

有没有办法改变这个属性而无需触摸 <b-navbar> 代码？

Answer 1

该死的。我做完了题，刚好就解决了。

所以，假设我在模板中有

<b-navbar toggleable="lg" type="dark" variant="dark">
  <!-- more stuff -->
</b-navbar>

然后在样式中你可以添加：

<style scoped>
 .navbar.navbar-dark.bg-dark{
    background-color: #AABB55!important;
 }
</style>

注意：如果没有 !important，由于某种原因它无法工作。

Change background color to navbar in bootstrap-vuejs