Html 自定义 Bootstrap：禁用主按钮边框

Customizing Bootstrap: disabled primary button border

提问by Robbie Averill

I am using the Bootstrap template customization generatorto change the colours of the default states and buttons using them.

我正在使用Bootstrap 模板自定义生成器来更改使用它们的默认状态和按钮的颜色。

I've changed all the states correctly, but when generating a button group and using a primary button with disabled state, it is still generating a blue border which I can't seem to find an option to change in Bootstrap's generator. Code:

我已经正确更改了所有状态，但是当生成按钮组并使用具有禁用状态的主按钮时，它仍然会生成一个蓝色边框，我似乎无法在 Bootstrap 的生成器中找到更改选项。代码：

<a href="#" class="btn btn-primary disabled">
    <strong>Title here</strong>
    <br><small>Hello world!</small>
</a>

This is generating this (note the light border compared to the button on the left which has a dark border because it is not disabled):

这是生成这个（注意与左侧的按钮相比，浅色边框具有深色边框，因为它没有被禁用）：

Inspecting the element shows this:

检查元素显示：

.btn-primary.disabled, .btn-primary[disabled], fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover, .btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover, .btn-primary.disabled:focus, 
.btn-primary[disabled]:focus, fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled:active, .btn-primary[disabled]:active, 
fieldset[disabled] .btn-primary:active, .btn-primary.disabled.active, 
.btn-primary[disabled].active, fieldset[disabled] .btn-primary.active {
    background-color: #428bca; 
    border-color: #357ebd;            /* these are light blue colours */
}

I can't seem to find anywhere in the template generator that refers to @btn-primary-disabled-borderor similar variations of that. I've looked through all references to disabledin the page and it doesn't seem to reference it.

我似乎无法在模板生成器中找到任何引用@btn-primary-disabled-border或类似变体的地方。我查看disabled了页面中的所有引用，但似乎没有引用它。

Am I missing something somewhere or does this need to be a manual CSS override? I'd like to keep this to using Bootstrap's LESS compiler if possible.

我是否在某处遗漏了什么，或者这是否需要手动 CSS 覆盖？如果可能的话，我想继续使用 Bootstrap 的 LESS 编译器。

Edit:here's a fiddleand here's a link to my current Bootstrap definitions

编辑：这是一个小提琴，这是我当前 Bootstrap 定义的链接

回答by Suresh Ponnukalai

Remove the transparent border property from your .btnclass like below.

从您的.btn类中删除透明边框属性，如下所示。

 .btn{
  border:0px solid transparent; /* this was 1px earlier */
 }

DEMO

演示