Css 在引导程序中使用输入组/输入组插件调整问题

在我的项目中，我有一个包含三个输入的表单，我只想使用

Bootstrap

提供的

input group

和

input group addon

。如果我使用以下代码

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

... vs弗兰克
@TextBoxFor（model=>model.vsFrank，新的{@class=“form control”}）
... 对任何其他人
@Html.TextBoxFor（model=>model.vsAnyOther，新的{@class=“form control”}）
... 对任何其他怪物
@TextBoxFor（model=>model.vsAnyMonster，新的{@class=“form control”}）

结果是这样的,

现在，我想把最后两行的标签排好，但第一行的标签要短一些。如果我给它们增加一些宽度，如下所示

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

... vs弗兰克
@TextBoxFor（model=>model.vsFrank，新的{@class=“form control”}）
... 对任何其他人
@Html.TextBoxFor（model=>model.vsAnyOther，新的{@class=“form control”}）
... 对任何其他怪物
@TextBoxFor（model=>model.vsAnyMonster，新的{@class=“form control”}）

结果如下所示：

---

现在，整个第一个控件被缩短！在不给所有控件显式宽度的情况下，如何防止出现这种情况？

为输入组添加一个

min width

CSS

。输入组{
最小宽度：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>

... vs弗兰克
... 对任何其他人
... 对任何其他怪物

---

谢谢，但这不起作用，因为较大组的宽度是动态的（它们填充了

col-md-4

），如果我将

min width

设置为小于该大小，它看起来仍然如上所示，如果太大，一切都会出错。所以你基本上是建议明确地固定宽度，这是我不想做的！