html - Bootstrap 按钮轮廓不起作用

Question

我是 Bootstrap 的新手，在正确设置按钮样式方面遇到了一些麻烦。我想要一个绿色(成功)颜色的按钮，只有他们网站上记录的轮廓 here .我使用时提示的代码<button type="button" class="btn btn-success-outline">Success</button> ，我得到一个没有明显样式的灰色按钮 which looks like this ...有人能帮帮我吗？谢谢!

Answer 1

我也遇到过类似的问题。您可以只在 CSS 中设置一个规则，或者覆盖“btn-success-outline”类。

/*Bootstrap button outline override*/
.btn-outline {
    background-color: transparent;
    color: inherit;
    transition: all .5s;
}

.btn-primary.btn-outline {
    color: #428bca;
}

.btn-success.btn-outline {
    color: #5cb85c;
}

.btn-info.btn-outline {
    color: #5bc0de;
}

.btn-warning.btn-outline {
    color: #f0ad4e;
}

.btn-danger.btn-outline {
    color: #d9534f;
}

.btn-primary.btn-outline:hover,
.btn-success.btn-outline:hover,
.btn-info.btn-outline:hover,
.btn-warning.btn-outline:hover,
.btn-danger.btn-outline:hover {
    color: #fff;
}

如果您使用上述 CSS 选择第一个选项，则在您的 html 中使用:

<button type="button" class="btn btn-success btn-outline">success</button>