Question

我正在使用bootstrap进行布局。我已将输入控件的max-width设置为280px。但是当我使用bootstrap的网格列大小超过280px时，这导致input-group-addon无法正常呈现。 input-group-addon并不坚持控制。

我在这里JSFiddle

我猜input-group-addon总是渲染到列的右侧，因此输入控件和插件之间有一个空格。

如何在不弄乱max-width和col的情况下解决此问题。

Answer 1

在小提琴中，.input-group-addon的宽度为32px，.form-control（max-width: 280px;）和.input-group-addon都为width: 32px ）{}包含在.input-group中，您只需要为.input-group定义最大宽度：

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

jsfiddle

Answer 2

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

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

<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/

input-group-addon并不坚持控制

2 个答案: