引导“btn-danger”类不会覆盖“form-control”类答案

【问题标题】：Bootstrap "btn-danger" class doesn't override "form-control" class引导“btn-danger”类不会覆盖“form-control”类
【发布时间】：2015-09-21 20:10:22
【问题描述】：

我正在使用带有引导程序的表单，它需要每个输入上的“表单控制”类。我想要一个只读输入来更改为另一个字段的错误输入的“btn-danger”类。但是，当我将“btn-danger”类添加到输入时，它不会在设置背景颜色时覆盖“form-control”，除非您将鼠标悬停在它上面。删除“表单控件”类会导致输入更改为错误的大小。知道为什么不覆盖背景颜色吗？类应该是级联的，对吧？

例如，如果我有以下输入：

<input id="test" class="form-control" readonly>

那么这不会像它应该的那样工作：

$('#test').addClass("btn btn-danger");

编辑：

这似乎是只读按钮的“表单控制”样式的问题。当我删除只读标签时，一切正常。我想 readonly 属性强制使用灰色背景。我该如何解决这个问题？

【问题讨论】：

您应该发布一个更全面的代码示例。您是否正在尝试验证表单字段？如果是这种情况，您可能想查看jQuery Validate 和jsfiddle。
我正在做自己的验证。试试这个，你会明白我的意思：<input type="text" class="form-control btn btn-danger" value="Test" readonly>
好的，但就按钮和验证而言，该代码与您的其他字段有何关联？我知道如果输入不正确，它应该“提醒”用户，但它实际上应该如何工作并不清楚它在表单中的位置以及按钮元素的用途。
$('#test').addClass("btn btn-danger");
可以试试 .hide() 和 .show();所以使用2个输入并隐藏btn-danger onload并显示原始输入，当它收到错误输入时隐藏原始输入并显示btn-danger。

标签： jquery forms twitter-bootstrap

【解决方案1】：

$(#test).addClass("btn btn-danger");

在测试中应该有这样的引号：

$("#test").addClass("btn btn-danger");

如果由于某种原因这不起作用，请发布更多代码，以便我们更多地了解问题所在以及如何解决问题。

更新：试试这个来覆盖只读属性的样式。

input[readonly]
{
    /*your style here*/
}

【讨论】：

已修复；这是一个错字。见上面的 cmets。它与任何其他代码无关。
我在 bootstrap.css 中找到了这个。仍然不确定为什么类“btn-danger”没有覆盖它。 .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { background-color: #eee; opacity: 1; }
在链接样式表的 html 页面上，是 bootstrap.css 文件优先还是自定义 CSS 样式？

【解决方案2】：

好的，我明白了。默认情况下，属性样式会覆盖类样式，因此无论添加什么类，“只读”按钮的背景都是灰色的，原因如下：

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
  background-color: #eee;
  opacity: 1;
}

但是，“禁用”没有相同的行为，因为明确定义了“.btn-danger[disabled]”类：

btn-danger.disabled,
.btn-danger[disabled],
fieldset[disabled] .btn-danger,
.btn-danger.disabled:hover,
.btn-danger[disabled]:hover,
fieldset[disabled] .btn-danger:hover,
.btn-danger.disabled:focus,
.btn-danger[disabled]:focus,
fieldset[disabled] .btn-danger:focus,
.btn-danger.disabled.focus,
.btn-danger[disabled].focus,
fieldset[disabled] .btn-danger.focus,
.btn-danger.disabled:active,
.btn-danger[disabled]:active,
fieldset[disabled] .btn-danger:active,
.btn-danger.disabled.active,
.btn-danger[disabled].active,
fieldset[disabled] .btn-danger.active {
  background-color: #d9534f;
  border-color: #d43f3a;
}

解决方法是为“.btn-danger[readonly]”添加类似的样式。

【讨论】：