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