bootstrap - 在输入组内设置输入控件大小

Question

我正在处理一个要求，其中输入组包含两个由input-group-addon分隔的文本框。我面临的问题是我无法使用bootstrap css设置文本框的宽度。第一个文本框应该比第二个文本框宽。

JSFiddle： https://jsfiddle.net/Vimalan/5eqdkveb/3/

当前

分隔符前后的文本框大小相同。

预期：

分隔符后的文本框应该很小。我对使用bootstrap css而不是自定义css的解决方案更感兴趣。

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="form-horizontal">
  <div class="form-group">
    <label class="col-xs-3 control-label">Approval Number</label>
    <div class="col-xs-9">
      <div class="input-group">
        <input type="text" class="form-control input-sm" id="ApprovalNumberTextBox" />
        <span class="input-group-addon">Delimiter</span>
        <input type="text" class="form-control input-sm" id="ApprovalNumberDelimiterTextBox" />
      </div>
    </div>
  </div>
</div>

Answer 1

我不明白为什么你不能设置文本框的宽度？！ 您只需将css规则添加到所需的输入并设置其宽度，如

<style>
    #ApprovalNumberDelimiterTextBox {
      width:40%;
    }
</style>

它正在工作 Here 或者还有另一个我无法解决的问题？