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>

Answer 2

你确定bootstrap css文件有效吗？因为在代码<button type="button" class="btn btn-success-outline">Success</button>中它没有指定任何东西，只有btn-success-outline（你说的）。您应该检查您的css文件是否正常工作或其他引导程序文件。它对我有用

Answer 3

如果您的Bootstrap工作正常。比你可以尝试这个代码。

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

检查你的父div。这个div是否使用Float css。如果使用float比btn需要清除：both;

Answer 4

仅供参考，它现在已重命名为btn-outline- *

https://github.com/twbs/bootstrap/issues/17719

Answer 5

你的工作不起作用的原因是它是btn-outline-success而不是btn-success-outline。

Answer 6

Chrome按钮轮廓兼容性问题：在您的代码<button type="button" class="btn btn-success-outline">Success</button>中，引导程序> 4.1.x，我发现包含type="button"会破坏Chrome的轮廓效果，但在Firefox中有效。

Answer 7

您为大纲使用了错误的类。

应为let arr1 = [[1,2]]; let arr2 = [1,2]; console.log(arrayInList(arr1,arr2)); arr2 = [1,3] console.log(arrayInList(arr1,arr2)); function arrayInList(arr1, arr2){ if(!arr1 || arr1.length==0 || !arr2 || arr2.length==0) return false; arr2 = arr2.sort(); let set = {}; for(let i = 0; i < arr1.length; i++) set[arr1[i].sort()] = i; return (set[arr2]!=undefined)?set[arr2]:-1; }。

引导程序没什么问题。

Answer 8

您可能正在使用旧版本的Bootstrap。转到https://getbootstrap.com/并更新您的链接

Bootstrap按钮轮廓不起作用

8 个答案: