css - 如何在 Bootstrap 3 中将最大宽度应用于带有尾随辅助按钮的输入字段表单控件？

Question

当我尝试将最大宽度应用于输入字段时，它会定位辅助按钮，就好像输入字段没有最大宽度一样。

JSFiddle Example

HTML:

<div class="container">
  <div class="form-group">
    <label class="control-label">Date</label>
    <div class="input-group">
      <input type="text" maxlength="10" class="form-control datefield" placeholder="mm/dd/yyyy">
      <span class="input-group-btn">
          <button id="btnClearDate" class="btn btn-secondary btn-default" type="button">Clear</button>
      </span>
    </div>
  </div>
</div>

CSS:

.datefield {
  max-width: 100px;
}

结果:

如何让辅助按钮正确地位于文本字段旁边？

Answer 1

尝试使用 display:inline-block;

https://jsfiddle.net/ex3ntia/DTcHh/22030/

.input-group-btn {display:inline-block;}