显示标签和布局的Bootstrap问题

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

请你申请这个CSS和检查

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

Answer 2

class form-control将宽度设置为100％

尝试此设置。

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