与表单控件类相关的类在引导程序4中无法正常运行

时间:2019-05-22 16:03:31

标签: html css bootstrap-4

1)form input元素的边框颜色不会更改为相关的颜色,例如绿色,橙色或红色。

2)它不会在输入的正确位置插入诸如“ ok”或“ x” gif之类的相关gif。

我期望表单控制成功,表单控制警告或表单控制危险会起作用,但没有成功。为什么?

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="form-group">
  <label class="form-control-label text-success" for="inputSuccess2">
            Success
        </label>
  <input type="text" class="form-control form-control-success" id="inputSuccess2" aria-describedby="inputSuccess2Status">
</div>
<div class="form-group">
  <label class="form-control-label text-warning" for="inputWarning2">
            With Warning
        </label>
  <input type="text" class="form-control form-control-warning" id="inputWarning2" aria-describedby="inputWarning2Status">
</div>
<div class="form-group">
  <label class="form-control-label text-danger" for="inputError2">With Error</label>
  <input type="text" class="form-control form-control-danger" id="inputError2" aria-describedby="inputError2Status">
</div>

编辑:

这解决了我的问题。[link] [1]

[1]:Bootstrap 4 form input with icon for validation 强文本

1 个答案:

答案 0 :(得分:1)

1)在Bootstrap 4中没有指定诸如.form-control-success,.form-control-danger等类。您可以将它们添加到自己的样式表中,例如:

.form-control.form-control-success:focus{
   border-color: #28a745;
   box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

2)要在输入中插入gif,您将需要进一步自定义html / css / js。从这里开始:https://getbootstrap.com/docs/4.3/components/input-group/#custom-forms