Bootstrap 对齐字体真棒图标

用户10415043

我正在使用 Bootstrap 3.3.5，并且我正在尝试实现一个 UI，我想在其中显示电子邮件是否可用，但是 UI 损坏并在输入框下方显示字体真棒

    <div class="row">
        <div class="col-md-10 col-sm-10 col-xs-10">
            <div class="form-group">
                <label>Email</label>
                <input type="email" required placeholder="Email" id="regemail" class="form-control" name="email">
                <span id="email_result"></span>
            </div>
        </div>
....
    </div>

#email_result在 ajax 调用后插入字体真棒图标。响应是在 HTML 中

<div class='col-md-10 col-sm-10 col-xs-10'> <i class='fa fa-times' aria-hidden='true'></i> </div>

丹尼尔布莱克

也许有什么联系这个？

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}
.email-input{
  display:inline-block !important;
  max-width:90%;
}
.inline-block{
  display:inline-block;
}
.block-label{
  display:block;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div class="row">
    <div class="col-md-10 col-sm-10 col-xs-10">
        <div class="form-group">
            <label class="block-label">Email</label>
            <input type="email" required placeholder="Email" id="regemail" class="form-control email-input" name="email">
            <span id="email_result" class="inline-block">
              <div class='col-md-10 col-sm-10 col-xs-10'>
                <i class='fa fa-times' aria-hidden='true'></i> 
              </div>
            </span>
        </div>
    </div>
</div>

基本上强制所有内容都是内联块，以便它们可以很好地坐在一起。如果您希望它位于输入框上方，请确保将标签设为块。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。