Question

我想直接在输入中应用类.has-error，而不是在父div中。

我试过这个：

<input type="text" name="nome" class="form-control has-error">

该类不直接应用于输入，是否还有其他类直接应用于输入？
或者我必须创建一个适用于输入的新类吗？

Answer 1

Bootstrap中没有内置如果您想要这些确切的功能，您需要自己创建它。我更喜欢坚持使用Bootstrap约定，但如果你有充分的理由，那么我会这样做。

http://getbootstrap.com/css/

您可以尝试btn-danger，但我不认为这是您正在寻找的功能。 http://www.bootply.com/C6qAZdKYva

发光边框：http://jsfiddle.net/yv9byt4b/

Answer 2

这内置于bootstrap中，您只需将其添加到form-group课程，而不是<input>

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-xs-6">
  <div class="form-group has-error">
    <input type="text" name="nome" class="form-control">
  </div>
</div>

＆＃13;

Answer 3

在bootstrap.css中找到has-error
复制有错误部分
删除has-error和next seclectors之间的空格，例如：

在：


    .has-error .help-block,

后：


    .has-error.help-block,

将复制的部分粘贴到您自己的css文件中。例如：


    /*
      Error styles for single error elements. Bootstrap allows error on control-group only
    */

    .has-error.help-block,
    .has-error.control-label,
    .has-error.radio,
    .has-error.checkbox,
    .has-error.radio-inline,
    .has-error.checkbox-inline,
    .has-error.radio label,
    .has-error.checkbox label,
    .has-error.radio-inline label,
    .has-error.checkbox-inline label {
      color: #cc0000;
    }
    .has-error.form-control {
      border-color: #cc0000;
      -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    }
    .has-error.form-control:focus {
      border-color: #990000;
      -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ff3333;
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ff3333;
    }
    .has-error.input-group-addon {
      color: #cc0000;
      border-color: #cc0000;
      background-color: #fff5cc;
    }
    .has-error.form-control-feedback {
      color: #cc0000;
    }

使用如下：输入或不同元素上的class =“form-control has-error”

Answer 4

在项目中添加

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>

如果没有添加到index.html文件中，请添加

如何直接在输入中应用.has-error？

4 个答案: