在Bootstrap中使用input-group / input-group-addon对齐问题

Question

在我的项目中，我有一个包含三个输入的表单，而且我想要使用input-group提供的input-group-addon和Bootstrap。如果我使用以下代码，

<div class="input-group form-group">
    <span style="text-align:left;" class="input-group-addon">... vs Frank</span>
    @Html.TextBoxFor(model => model.vsFrank, new { @class = "form-control" })
</div>

<div class="input-group form-group">
    <span style="text-align:left;" class="input-group-addon"> ... vs any other guy</span>
    @Html.TextBoxFor(model => model.vsAnyOther, new { @class = "form-control" })
</div>

<div class="input-group form-group ">
    <span style="text-align:left;" class="input-group-addon">... vs any other monster</span>
    @Html.TextBoxFor(model => model.vsAnyMonster, new { @class = "form-control" })
</div>

结果如下所示，

现在，我想将最后两行的标签排成一行，但第一行的标签更短。如果我为它们添加一些宽度，如下所示，

<div class="input-group form-group">
    <span style="width:15ch; text-align:left;" class="input-group-addon">... vs Frank</span>
    @Html.TextBoxFor(model => model.vsFrank, new { @class = "form-control" })
</div>

<div class="input-group form-group">
    <span style="width:25ch; text-align:left;" class="input-group-addon"> ... vs any other guy</span>
    @Html.TextBoxFor(model => model.vsAnyOther, new { @class = "form-control" })
</div>

<div class="input-group form-group ">
    <span style="width:25ch; text-align:left;" class="input-group-addon">... vs any other monster</span>
    @Html.TextBoxFor(model => model.vsAnyMonster, new { @class = "form-control" })
</div>

结果如下：

现在缩短了整个第一个控件！如何在不给所有控件显式宽度的情况下阻止它？

Answer 1

为输入组添加min-width。

<强> CSS

 .input-group {
   min-width: 100%;
 }

<强> HTML

<div class="row">
  <div class="col-md-3">
    <div class="input-group form-group">
      <span style="width:15ch; text-align:left;" class="input-group-addon">... vs Frank</span>
      <input class="form-control">
    </div>

    <div class="input-group form-group">
      <span style="width:25ch; text-align:left;" class="input-group-addon">... vs any other guy</span>
      <input class="form-control">
    </div>

    <div class="input-group form-group">
      <span style="width:25ch; text-align:left;" class="input-group-addon">... vs any other monster</span>
      <input class="form-control">
    </div>
  </div>
</div>

Bootply