javascript - 显示标签和布局的引导问题

Question

我使用了 bootstrap 3 水平形式。我也一直在使用 jquery 验证器插件来验证我的表单。当我尝试在我的输入字段旁边显示一个刻度图像时。它不断地在它下面。我已经应用了包含刻度图像的 .valid 类来显示：inline-block，尽管我仍然没有得到任何结果。这是我的有效类，如果输入字段有效，则附加。这是我的表单组课程

<div class="form-group">
 <label class="control-label col-lg-3" for="email">Email:</label>
    <div class="col-lg-9">
        <sf:input type="text" name="email" class="form-control" path="email" /><br/><sf:errors path="email" cssClass="error"></sf:errors>
    </div>
</div>

这是我的 css '.valid' 字段，在输入字段有效后显示。

label.valid{
      width: 30px;
      height: 30px;
      background: url(../img/Done.png) center center no-repeat;
      display: inline-block;
      text-indent: -9999px;
}

这是我得到的图像： 如您所见，标签显示在输入字段下方。我想直接在它旁边显示它。请帮忙

Answer 1

class form-control sets the width to 100%

Try this setup.

<div class="form-group">
   <div class="col-lg-3 text-right">
      <label class="control-label" for="email">Email:</label>
   </div>
   <div class="col-lg-6">
      <sf:input type="text" name="email" class="form-control" path="email" />
   </div>
   <div class="col-lg-3">
      <sf:errors path="email" cssClass="error"></sf:errors>
   </div>
</div>

Answer 2

你能应用这个CSS并检查吗

.addthiscSS{
    display:inline-block;
    width: auto;
    vertical-align: text-top;
   }