同时使用group-btn和group-addon的输入组

我正尝试在按钮上使用输入组，然后在工具提示信息上使用带有图形的插件。我附上了最终结果如何的图像。您可以看到输入字段和按钮和插件不在同一个（可视）组中。同时使用group-btn和group-addon的输入组

有没有办法可以做到或者我应该选择另一种解决方案？

这是因为在图像中看到的，其产生的结果的标记：

<div class="form-group"> 
    <label class="control-label col-md-3" for="Employer_EmployerTitle">Employer</label> 
    <div class="col-md-6"> 
     <div class="input-group"> 
      <input name="Employer.EmployerTitle" class="form-control text-box single-line valid" id="Employer_EmployerTitle" aria-invalid="false" style="text-transform: uppercase;" type="text" value="StackOverflow inc."> 
      <div class="input-group-btn"> 
       <button class="btn btn-success" id="btnModalSearch" onclick="EmployerSearchModalShow()" type="button">Search</button> 
      </div> 
      <span class="input-group-addon"> 
       <span title="" class="glyphicon glyphicon-info-sign" id="toolTipSpanEmployerSearch" data-original-title="Search Employers from local database." data-toggle="tooltip" data-placement="right"></span> 
      </span> 
     </div> 
    </div> 
    <div class="col-md-3"> 
     <span class="field-validation-valid text-danger" data-valmsg-replace="true" data-valmsg-for="Employer.EmployerTitle"></span> 
    </div> 
</div>

来源

2016-11-25 Iztoksson

尝试使用以下

HTML

<div class="form-group"> 
    <label class="control-label col-md-3" for="Employer_EmployerTitle">Employer</label> 
    <div class="col-md-6"> 
    <div class="input-group"> 
     <input name="Employer.EmployerTitle" class="form-control text-box single-line valid" id="Employer_EmployerTitle" aria-invalid="false" style="text-transform: uppercase;" type="text" value="StackOverflow inc."> 
     <div class="input-group-btn"> 
     <button class="btn btn-success" id="btnModalSearch" onclick="EmployerSearchModalShow()" type="button">Search</button> 
     <button class="btn btn-default"> 
      <span title="" class="glyphicon glyphicon-info-sign" id="toolTipSpanEmployerSearch" data-original-title="Search Employers from local database." data-toggle="tooltip" data-placement="right"></span> 
     </button> 
     </div> 

    </div> 
    </div> 
    <div class="col-md-3"> 
    <span class="field-validation-valid text-danger" data-valmsg-replace="true" data-valmsg-for="Employer.EmployerTitle"></span> 
    </div> 
</div>

Fiddle

来源

2016-11-25 10:12:29 Raviteja

对不起，迟到的回复，我已经尝试过，它按预期工作。与class =“input-group-addon”相比，gylphicon按钮更窄，但可以修复。 – Iztoksson

同时使用group-btn和group-addon的输入组

回答

相关问题