输入组插件不坚持控制答案

【问题标题】：input-group-addon doesnt stick to control输入组插件不坚持控制
【发布时间】：2017-04-25 07:35:10
【问题描述】：

我正在使用引导程序进行布局。我已将输入控件的最大宽度设置为 280 像素。但这会导致input-group-addon 在我使用大于 280 像素的引导程序的网格列大小时无法正确呈现。 input-group-addon 不坚持控制。

我这里有JSFiddle

我猜input-group-addon 总是呈现在列的右侧，所以输入控件和插件之间有一个空格。

如何在不与max-width 和col 混淆的情况下解决此问题。

【问题讨论】：

标签： css twitter-bootstrap-3

【解决方案1】：

在您的 fiddle 中，.input-group-addon 的宽度为 32px，.form-control (max-width: 280px;) 和 .input-group-addon (width: 32px) 都包含在 .input-group 中，然后你只需要为.input-group定义最大宽度：

.input-group {
  max-width: 312px;
}

jsfiddle

【讨论】：

【解决方案2】：

我不建议在 Bootstrap 中设置输入（或任何其他元素）的 width 或 max-width。

引导元素旨在填充所有可用空间。通过使用内置的网格系统，它们可以很容易地做出响应。我的建议是通过限制容器的宽度来限制它们的宽度，如下所示：

<div class="row">
  <div class="col-xs-6"><!-- NOTE THE 'XS' HERE -->
    <div class="input-group">
      <input name="FirstName" class="form-control" id="FirstName" type="text" value="399035034">
      <span class="input-group-addon">+</span>
    </div>
  </div>
</div>

https://jsfiddle.net/v85wzajr/2/

【讨论】：