我在我的元素中使用了 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 来避免这种情况吗?
最佳答案
从 Github 上的 bootstrap 源代码来看,当按钮组中的按钮通过加倍边框彼此相邻对齐时,将使用这些 -1px 样式。如果将 2 个具有 1 像素边框的按钮彼此相邻放置,则会在视觉上创建 2 像素边框。 -1px 将按钮移动,这样边框就不会加倍。
来自实际 github 来源的评论:
// Prevent double borders when buttons are next to each other
关于html - Bootstrap 按钮样式 margin-left :-1px when click outside that area,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28492036/