html - Bootstrap 按钮样式 margin-left :-1px when click outside that area

标签 html css twitter-bootstrap twitter-bootstrap-3

我在我的元素中使用了 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/

相关文章:

javascript - 页面在 IE9 中无法正确加载

html - Ruby - 自动从下拉框中选择项目

android - Jquery Mobile 面板随内容滚动

javascript - 提交后隐藏一个div

javascript - 无法在 Bootstrap 框架中打开可折叠菜单

css - 如何使用 CSS 预处理器将扩展样式应用于不同类名的子选择器?

html - Angular:- 在鼠标悬停时,在图像上显示按钮(来自 *ngFor 循环)

javascript - JQuery 的 .load() 导致 HTML 结构错误

html - 消除页面底部的空白

twitter-bootstrap - thymeleaf html 元素替换