css - Bootstrap 中的 HTML 需要验证消息样式问题

Question

在我的带有日历图标的 Bootstrap 表单字段中，它是必需的。但是，当显示错误消息时，它会像下图一样一团糟。

HTML代码是

<div class="input-group">
     <div class="input-group-addon"><i class="fa fa-calendar"></i></div>
     <input type="text" value="" class="form-control error" name="from" id="from" required">
 </div>

下面的 Bootstrap CSS

 .input-group-addon, .input-group-btn, .input-group .form-control {
        display: table-cell;
    }
.input-group-addon, .input-group-btn {
    vertical-align: middle;
    white-space: nowrap;
    width: 1%;
}
.input-group-addon {
    background-color: #eeeeee;
    border: 1px solid #cacaca;
    border-radius: 3px;
    color: #333333;
    font-size: 14px;
    font-weight: normal;
    line-height: 1;
    padding: 6px 12px;
    text-align: center;
}
.input-group .form-control {
    float: left;
    margin-bottom: 0;
    position: relative;
    width: 100%;
    z-index: 2;
}

HTML5 要求错误

<label id="from-error" class="error" for="from">This field is required.</label>

因此发生错误时HTML代码如下所示

<div class="input-group">
     <div class="input-group-addon"><i class="fa fa-calendar"></i></div>
     <input type="text" value="" class="form-control error" name="from" id="from" required">
<label id="from-error" class="error" for="from">This field is required.</label>
 </div>

那么如何解决这个问题并在衬里字段中设置日历图标？

Answer 1

因为 input-group 中的所有元素都是 display: table-cell ，你必须提供 display: table-row 给label 用于它出现在新行中(在与表格不同的行中)。

编辑

如果您希望错误正好出现在输入下方并紧接在日历图标之后，我建议您改用 position: absolute。

检查编辑后的代码片段:

.input-group-addon,
.input-group-btn,
.input-group .form-control {
  display: table-cell;
}

.input-group-addon,
.input-group-btn {
  vertical-align: middle;
  white-space: nowrap;
  width: 1%;
}

.input-group-addon {
  background-color: #eeeeee;
  border: 1px solid #cacaca;
  border-radius: 3px;
  color: #333333;
  font-size: 14px;
  font-weight: normal;
  line-height: 1;
  padding: 6px 12px;
  text-align: center;
}

.input-group .form-control {
  float: left;
  margin-bottom: 0;
  position: relative;
  width: 100%;
  z-index: 2;
}

/* #from-error {
  display: table-row;
} */

#from-error {
    position: absolute;
    bottom: -32px;
    left: 40px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="input-group">
  <div class="input-group-addon"><i class="fa fa-calendar"></i></div>
  <input type="text" value="" class="form-control error" name="from" id="from" required>
  <label id="from-error" class="error" for="from">This field is required.</label>
</div>