Bootstrap按钮轮廓不起作用

Question

我对Bootstrap很新,并且在按钮样式设置方面遇到了一些麻烦.我想要一个绿色(成功)彩色按钮,这里只有一个大纲,如他们网站上所记录的那样.当我使用建议的代码时<button type="button" class="btn btn-success-outline">Success</button>,我得到一个没有明显样式的灰色按钮,看起来像这样 ......有人可以帮帮我吗？谢谢!

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>

Answer 2

您确定 bootstrap css 文件有效吗？因为在该代码中，<button type="button" class="btn btn-success-outline">Success</button>除了 btn-success-outline （你所说的）之外，它没有指定任何内容。您应该检查您的 css 文件或其他引导文档是否有效。这个对我有用