Question

与Bootstrap的bg-danger类关联的背景颜色未应用于类form-control的输入文本框。怎么办呢？

<div class="form">
    <div class="form-group has-error">
        <input type="text" class="form-control bg-danger">
    </div>
</div>

Answer 1

form-control类的样式定义低于bootstrap.css（或bootstrap.min.css）中bg-danger类的样式定义。因此，表单控件样式会用白色覆盖背景颜色。

您需要在某处创建自己的自定义类/样式，以使用不同的背景颜色覆盖表单控件。

Answer 2

好吧，正如其他答案所说，form-control在bg-danger之后，因此background-color会覆盖bg-danger的背景。

但是我可以使用这两个类而无需额外的类。假设我有以下HTML代码：

<input type="text" class="form-control bg-danger" />

所以我只需要在我的css中添加以下代码

.form-control.bg-danger {
    background-color: #f2dede; 
}

因此，当一个元素类form-control和bg-danger时，他将获得此background-color（与bg-danger相同，但如果你想要，你可以选择另一种颜色）。显然，我可以对所有其他bg-x引导类执行相同的操作。

Answer 3

表格控制和bg-danger不能一起使用。在输入字段中提及不同的类并设置其样式属性。您可以将它用于一个输入字段或所有字段。

.background-input{
  background-color:#ff1a1a;  
}

<div class="form">
        <div class="form-group has-error">
            <input type="text" class="form-control background-input">
        </div>
    </div>

如何将Bootstrap bg-x（例如，bg-danger）类添加到输入文本框？

3 个答案: