无法更改引导按钮文本的非活动颜色

Question

我是 bootstrap、css 和 html 的新手，但到目前为止它看起来很友好。我有一些按钮问题，我不知道该怎么想。主要是，我希望按钮中的文本是黑色的，然后只在悬停时加下划线。我尝试先做一些内联 css，但没有用，所以我想“让我们尝试在 bootstrap.css 源代码中找到它并查看更改颜色”，这正是我所做的，它适用于悬停文本，但不是其他，这是我所做的更改：

.text-info{color:#31708f}a.text-info:focus,a.text-info:hover{color:#245269} 

改为：

.text-info{color:#000}a.text-info:focus,a.text-info:hover{color:#000}

并且在 bootstrap.css 中没有出现任何其他 text-info。如果它有帮助，这里是按钮在第一列中的容器行：

<div class="row">
    <div class="col-sm-6 col-md-6 col-lg-6" >
        <div class="well"><a href="" class="btn-warning btn-block text-center text-info">Button</a></div>
    </div>
    <div class="col-sm-6 col-md-6 col-lg-6">
                div class="well">This is the first row and second column</div>
</div>

你可以从我行中的文字看出我是新来的。我认为唯一可能相关的另一件事是我在排队时覆盖了井的颜色。任何建议表示赞赏。我标记了django，因为它是唯一与统计无关的（除了推特）引导相关标签。巧合的是，我只是想美化我由 'django' 驱动的丑陋的 shell 网站！提前感谢您的任何建议。

Answer 1

这些是控制您尝试使用的“btn 警告”行为的类。

.btn-warning {
  color: #ffffff; /*Make the color Change Here*/
  background-color: #f0ad4e;
  border-color: #eea236;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.open .dropdown-toggle.btn-warning {
  color: #ffffff;
  background-color: #ed9c28;
  border-color: #d58512;
text-decoration:underline;
}

.btn-warning:active,
.btn-warning.active,
.open .dropdown-toggle.btn-warning {
  background-image: none;
}

.btn-warning.disabled,
.btn-warning[disabled],
fieldset[disabled] .btn-warning,
.btn-warning.disabled:hover,
.btn-warning[disabled]:hover,
fieldset[disabled] .btn-warning:hover,
.btn-warning.disabled:focus,
.btn-warning[disabled]:focus,
fieldset[disabled] .btn-warning:focus,
.btn-warning.disabled:active,
.btn-warning[disabled]:active,
fieldset[disabled] .btn-warning:active,
.btn-warning.disabled.active,
.btn-warning[disabled].active,
fieldset[disabled] .btn-warning.active {
  background-color: #f0ad4e;
  border-color: #eea236;
}

对 html 进行这些更改

<div class="row">
    <div class="col-sm-6 col-md-6 col-lg-6" >
        <div class="well"><a href="" class="btn btn-warning">Button</a></div>
    </div>
    <div class="col-sm-6 col-md-6 col-lg-6">
                div class="well">This is the first row and second column</div>
</div>

Answer 2

您可以添加自定义 css 文件并在加载 bootstrap.css 后加载它。这将覆盖设置，我从不弄乱 bootstrap.css，因为我从其他地方而不是本地加载它。

编辑：您也可以内联更改它（html 明智），但这不是我们喜欢分离关注点的好习惯。

另外，没有看到引导程序更改的问题可能是缓存，我在this link找到了一个不错的技巧

祝你好运