具有 group-btn 和 group-addon 的输入组答案

【问题标题】：Input group with both group-btn and group-addon具有 group-btn 和 group-addon 的输入组
【发布时间】：2017-04-09 15:37:11
【问题描述】：

我正在尝试使用带有按钮的输入组，然后使用带有字形图标上的工具提示信息的插件。我附上了最终结果的图像。可以看到输入框和按钮以及插件不在同一个（视觉）组中。

有没有办法可以做到这一点，还是我应该选择其他解决方案？

这是产生如图所示结果的标记：

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

【问题讨论】：

标签： twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

试试下面的

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

【讨论】：

抱歉回复晚了，我已经尝试过了，它按预期工作。与 class="input-group-addon" 相比，gylphicon 按钮更窄，但可以修复。