更少twitter bootstrap 3.0 navbar类的背景色 [英] Change twitter bootstrap 3.0 navbar class background color in less

问题描述

在html中：

 < div class =navbar navbar-default> 
  

in variable.less file：

  @ navbar-default-bg：＃f8f8f8; 
  

将这个十六进制颜色更改为其他颜色（即蓝色）后，您会注意到只有底部边缘颜色变为蓝色。因为类导航栏也有背景，它会阻止@ navbar-default-bg颜色。

示例：

1.in html：

 < div class =navbar navbar-default> 
  

in variable.less：

@ navbar-default-bg：blue;

输出：

2.in html：

 < div class =navbar navbar-default> 
  

in variable.less：

@ navbar-default-bg：blue;

在custom.css中：

.navbar {background：blue}

输出：

我知道如果我制作一个自定义的css文件并将 .navbar {background：blue} 它会将导航栏颜色更改为我想要的。

但我更喜欢编辑较少的文件。有没有办法做到这一点？
在您认为这是一个重复的问题之前先试试您的结局！

解决方案

尝试从项目中删除默认的bootstrap-theme.css和bootstrap-theme.min.css文件，因为我认为它们覆盖了主bootstrap.css文件中的一些样式。

in html:

<div class="navbar navbar-default">

in variable.less file:

@navbar-default-bg: #f8f8f8;

After change this hex colour to other colour(ie. blue), you will notice that only bottom edge colour change to blue. because the class navbar has background too, it block the @navbar-default-bg colour.

Sample:

1.in html:

<div class="navbar navbar-default">

in variable.less:

@navbar-default-bg: blue;

Output:

2.in html:

<div class="navbar navbar-default">

in variable.less:

@navbar-default-bg: blue;

in custom.css:

.navbar{background: blue}

Output:

I know that if I make a custom css file and put .navbar{background: blue} it will change the navbar color to what I want.

But I prefer to edit less file. is there any way to do that? Try on your end first before you think this is a duplicate question!

解决方案

Try removing the default bootstrap-theme.css and bootstrap-theme.min.css files from your project as I think they over-ride some of the styles in the main bootstrap.css files.

这篇关于更少twitter bootstrap 3.0 navbar类的背景色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！