Bootstrap输入组

Question

我注意到Bootstrap 3渲染输入组有些奇怪，至少在Firefox和IE上是这样（Chrome未经测试）：

如您所见，如果文本输入前面有两个或更多按钮，则其左边距会变宽。

以下是我用来重现此问题的代码：

<div class="input-group">
    <span class="btn btn-default input-group-addon" id="basic-addon1">A</span>
    <span class="btn btn-default input-group-addon" id="basic-addon2">B</span>
    <input type="text" class="form-control" placeholder="C" aria-describedby="basic-addon1">
</div>

<br/><br/>

<div class="input-group">
    <span class="btn btn-default input-group-addon" id="basic-addon1">A</span>
    <input type="text" class="form-control" placeholder="C" aria-describedby="basic-addon1">
</div>

这是预期/正常吗？我该如何解决这个问题？

Associated JSFiddle：https://jsfiddle.net/DTcHh/21418/

Answer 1

我假设你在谈论你在B看到的双边界？如果是这样，那只是因为1px和B有C个边框，所以当它们彼此相邻时，就有2.这可以通过使用类似的东西轻松删除：

.form-control {
  border-left: 0;
}

但是在执行此操作时，它将删除边框，如果您使用此技术而旁边没有其他按钮元素，则会显示错误。如果您添加此HTML或view your updated js.fiddle，那么可以看到我的意思。

<div class="input-group">
    <span class="btn btn-default input-group-addon" id="basic-addon1">A</span>
    <span class="btn btn-default input-group-addon" id="basic-addon2">B</span>
    <input type="text" class="form-control" placeholder="C" aria-describedby="basic-addon1">
</div>

    <br/><br/>

<div class="input-group">
    <span class="btn btn-default input-group-addon" id="basic-addon1">A</span>
    <input type="text" class="form-control" placeholder="C" aria-describedby="basic-addon1">
</div>

<br/><br/>

<div class="input-group">
    <span class="btn btn-default input-group-addon" id="basic-addon1">A</span>
    <span class="btn btn-default input-group-addon" id="basic-addon2">B</span>
</div>

所以我相信这就是为什么Bootstrap团队在那里有双重边界的原因，因为根据你需要做什么，最好在某些情况下有两个边界然后没有。希望有所帮助。

Answer 2

根据文档，您的结构不正确 - ＆gt; Multiple Button Input Group

您目前正在将input-group-addon直接应用于按钮，您希望input-group-btn作为按钮的父级（这也是您没有看到{{1}的原因造型也应该是白色的，而不是灰色的。）

工作示例;

＆＃13;

＆＃13;

btn-default

＆＃13;

＆＃13;

＆＃13;