Question

我正在使用Bootstrap 3.3.5，并且试图创建一个UI，以在其中显示电子邮件是否可用，但是该UI中断并在输入框下方显示了很棒的字体{{ 3}}

    <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>

令人敬畏的字体图标在ajax调用后被插入#email_result中。响应使用HTML

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

Answer 1

也许有些链接吗？

.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>

基本上将所有内容强制内联，以便它们可以很好地相互放置。如果希望标签位于输入框上方，请确保将其标记为块。

引导程序与字体真棒图标对齐

1 个答案: