Question

我目前正在使用bootstrap设计网页。我需要一个自定义按钮颜色，所以我设计了自己的按钮类，你可以在那里看到：

 .btn.btn-radio {
    background: #f3bb70;
    border-color: transparent;
    border-right-color: #684235;
}

.btn.btn-plus {
  background: #684235;
  border-color: transparent;
}

由于按钮组颜色相同，我只想在右侧放置边框，以显示分隔。但只有当鼠标悬停在按钮上时才会出现边框（请参阅https://jsfiddle.net/DTcHh/20757/）。为什么会这样？我如何让它一直在那里？

Answer 1

这个问题与按钮的z-index有关，所以要解决问题而不要混淆你需要将边框放到所有按钮然后删除第一个孩子左边框的边距

.btn.btn-radio {
    background: #f3bb70;
    border-color: transparent;
    border-right-color: #684235;
    border-left-color: #684235;
}
.btn.btn-radio:first-child{
    border-left-color: transparent;
}

.btn.btn-plus {
    background: #684235;
    border-color: transparent;

}

Answer 2

Bootstrap在css中有这一行。这会产生问题。

.btn-group .btn+.btn, .btn-group .btn+.btn-group, .btn-group .btn-group+.btn, .btn-group .btn-group+.btn-group {
      margin-left: -1px;
 }

你可以使用它，但我不知道它是否会产生其他一些问题：

 .btn.btn-radio {
    background: #f3bb70;
    border-color: transparent;
    border-right-color: #684235;
    margin-left: 0!important;
 }

Answer 3

您必须覆盖bootstrap.css文件中的.btn

它目前有

border:1px solid transparent;因此您的边框无法正常显示

Bootstrap自定义按钮边框仅在悬停时出现

3 个答案: