Question

我正在为我的项目使用bootstrap，我用自己的CSS文件做了一些mofigication。但是我需要更改bootstrap导航栏右侧项目选择的颜色。无论我怎么努力，都希望用我的CSS文件进行更改

.navbar-static-top{
    background-color: #3498db;
}

 .navbar-brand
{
  font-family: 'Lato', sans-serif;
  color:white;
  font-size: 190%;
}

body {
  font-size: 9px;
} 

table-hover{
    background-color: #FFF;
}

thead th {
    color: #FFF;
    text-align: Left;
    background-color: #3498db;
    font-size: 11px;
}

tbody td {
     height: 20px;
    padding: px px;
    font-size: 11px;
    text-align: right;
}

.vertical-center {
  background-color: #FFF;
}

.input-sm {
  font-size: 12px;
  color: black;
}


input[readonly] {
    background-color: #fff;
    /* any other styles */
}

.nav li{
    padding-right:10px;
    font-size: 120%;
    color: #FFF;
   }

.nav.navbar-nav.navbar-right li a {
    color: #FFF;
    font-size: 120%;
}

.input-sm {
  height: 25px;
  padding: px px;
  font-size: 12px;
}

#submitbtn{
    align: center;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  -moz-appearance: none;
   appearance: none;
  margin: 0; 
}

input[type=number] {
    -moz-appearance:textfield;
}

<nav class="navbar navbar-default navbar-static-top">
    <div class="container-fluid">
    <div class="navbar-header">
     <a class="navbar-brand" href="#">Leave Application</a>
    <ul class="nav navbar-nav">
    </ul>   
    </div>
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">

        </ul>
        <ul class="nav navbar-nav navbar-right">
        <li ><a href="sessionstart.php">My Leaves</a></li>
        <li class="active"><a href="request.php">Application</a></li>
        </ul>
    </div>
</nav>

这是我的网站当前在浏览器Link

中显示的示例图片

我希望将此灰色更改为白色，并为所选项目添加黑色文字。我怎么能这样做？

Answer 1

这可能是链接外部css文件和引导文件

的问题

你需要这样的地方

以便浏览器从文件中读取最后一次css更新。

Answer 2

现在，试试吧。只需在CSS中添加以下代码即可。

.navbar-default .navbar-nav > .active > a {
    background: #000000;
    color: white;
}

Answer 3

当您提供代码时，它正在使用codepen。

我认为，问题是在HTML页面中没有链接css文件。

Answer 4

请试试这个：

nav.navbar .navbar-collapse ul.navbar-right li.active a {
  color: #000;
  background: #fff;
}

Answer 5

首先确保你在bootstrap之后加载自定义css，否则它不会覆盖它。

其次要确保你的css规则指向DOM元素与bootstrap完全相同或更具体。

我个人在父节点前面加上我自己的id或类，并在我的css中引用它。这保证了我总是使用更具体的css声明然后引导程序。

但如果它对你没有意义，你可以在你的css比例之后使用！important，但我建议不惜一切代价避免它，除非你确切知道没有别的办法

更改bootstrap导航栏右侧项目选择的颜色

5 个答案: