Bootstrap 4.2.1-如何覆盖按钮轮廓？

Question

在我的应用中，单击我周围有蓝色边框的任何按钮。特别是铬。要删除它，我尝试这样：

@import '~bootstrap/scss/_functions.scss';
@import '~bootstrap/scss/_variables.scss';
@import '~bootstrap/scss/mixins/_breakpoints.scss';
@import 'global.scss';
@import "~bootstrap/scss/bootstrap";

$grid-breakpoints: (
    sm: 768px,
    md: 768px,
    lg: 1024px
);

$container-min-widths: (
  sm: 768px,
  md: 768px,
  lg: 1024px
);

//resets;-

html,body {
    padding: 0;
    margin: 0;
    height: 100%;
}
.wrapper.container-fluid{
    min-height: 100%;
    padding:0;
    margin: 0;
}

.btn:focus,.btn:active { //but not works!!
   outline: none !important;
   box-shadow: none;
}

但不能删除大纲的结果。我在这里做错了什么？有人帮我吗？

Answer 1

删除outline

您需要使用:hover，:active和visited伪类来删除轮廓。

.btn-sm,
.btn-sm:hover,
.btn-sm:active,
.btn-sm:visited {
  outline: none !important;
  border: none;
  cursor: pointer;
}

<button class="btn btn-sm btn-bordered">Button</button>


<button class="btn btn-lg btn-bordered">Button</button>

---

如果以上代码无效，请删除box-shadow。但我不建议这样做。