Question

我在我的项目中使用了bootstrap，如下所示

<div class="input-group">
  <input type="text" class="form-control input-lg" autofocus>
  <span class="input-group-btn">
    <button class="btn btn-primary btn-lg" type="button">search</button>
  </span>
</div>

在Bootstrap中，我看到了：

.input-group-btn:last-child > .btn {
    margin-left: -1px;
}

所以我写了一些CSS以避免无用的margin-left:-1px;，但我仍有问题：

当我点击<div class="input-group search-bar">外的区域时，该按钮仍然像margin-left:-1px;

那样努力

我很困惑，我应该写一些JavaScript来避免这种情况吗？

Answer 1

从Github上的bootstrap源代码中，这些-1px样式用于按钮组，其中按钮彼此相邻并且边框加倍。如果您将2个按钮与1px边框相邻放置，则可以直观地创建2px边框。 -1px将按钮移开，使边框不会加倍。

来自实际github源的评论：

// Prevent double borders when buttons are next to each other

Answer 2

当按钮彼此相邻时，-1px边距用于防止双边框。这意味着这样。

如果你真的需要摆脱这个，你可能还需要为.input-group-btn＆gt;调整一些负边距和/或z-index。 .btn：hover，：focus，：active，：first-child和：last-child。

Bootstrap按钮样式margin-left：在该区域外单击时为-1px

2 个答案: