使用input-group-addon将文本框的大小调整为与没有插件的文本框相同的大小

Question

我有一个带有几个文本框的表单，其中一个有input-group-addon类来显示一个符号。从逻辑上讲，这占用了空间，但现在文本框在表单中突出显示。请参见屏幕截图：

以下是该字段的代码：

<div class="form-group row">
   @Html.LabelFor(m => m.EstimateAmount, new { @class = "col-md-2 control-label" })
   <div class="col-md-10">
      <div class="input-group">
         <span class="input-group-addon">
            <span class="mif-eur"></span>
         </span>
         @Html.TextBoxFor(m => m.EstimateAmount, new { @class = "form-control", placeholder = "" })
      </div>
   </div>
</div>

这是一个用于演示的JSFiddle：https://jsfiddle.net/7y4o4jp7/

我如何解决这个问题，以便每个文本框最终都相同（如果其他文本框增长，或者带有插件的文本框应该缩小则不重要）？请参阅下面的屏幕截图，了解所需的结果：

Answer 1

您必须将.css max-width应用于.form-group而不是输入，我还会在插件中放置一个图标而不是键盘符号：

.form-group {
    max-width: 280px;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">


<div class="form-group row">
  <label class="col-md-2 control-label" for="DossierNumber">Dossiernummer</label>
  <div class="col-md-10">
    <input class="form-control" id="DossierNumber" name="DossierNumber" placeholder="0000/0000 XXX" type="text" value="" />
  </div>
</div>
<div class="form-group row">
  <label class="col-md-2 control-label" for="Designer">Ontwerper</label>
  <div class="col-md-10">
    <input class="form-control" id="Designer" name="Designer" placeholder="" type="text" value="" />
  </div>
</div>
<div class="form-group row">
  <label class="col-md-2 control-label" for="EstimateAmount">Ramingsbedrag</label>
  <div class="col-md-10">
    <div class="input-group">
      <span class="input-group-addon">
        <i class="glyphicon glyphicon-eur"></i>
      </span>
      <input class="form-control" id="EstimateAmount" name="EstimateAmount" placeholder="" type="text" value="" />
    </div>
  </div>
</div>
<div class="form-group row">
  <label class="col-md-2 control-label" for="SubmissionStatus">Stadium van indiening</label>
  <div class="col-md-10">
    <input class="form-control" id="SubmissionStatus" name="SubmissionStatus" placeholder="" type="text" value="" />
  </div>
</div>
<div class="form-group">
  <button type="submit" id="submitButton" class="btn btn-primary">Indienen</button>
</div>

Answer 2

如果在css上。我喜欢在这种情况下制作

.input-group-addon {position absolute; top: 0; left: 0;}

和.input-group给出.input-group-addon + box-sizing的填充左侧宽度：border-box;所以padding不会扩展.input-group的原始大小