html - 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 还是还有其他我没有得到的问题？