Html Bootstrap 按钮轮廓不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37095575/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap button outline not working
提问by Snazzy Sauce
I am pretty new to Bootstrap, and am having a bit of trouble with getting my buttons styled correctly. I want a green(success) colored button, with just an outline as documented on their website here. When I use the code suggested <button type="button" class="btn btn-success-outline">Success</button>, I get a grey button that has no apparent styling which looks like this... Could anybody help me out?
Thanks!
我是 Bootstrap 的新手，在正确设置按钮样式方面遇到了一些麻烦。我希望有一个绿色（成功）彩色按钮，只有一个大纲在其网站上的记录在这里。当我使用建议的代码时<button type="button" class="btn btn-success-outline">Success</button>，我得到一个没有明显样式的灰色按钮，看起来像这样......有人可以帮我吗？谢谢！
回答by Abdul Maye
I've been having a similar issue. You can just set up a rule in CSS to what it should be OR override the 'btn-success-outline' class.
我一直有类似的问题。您可以在 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;
}
If you choose the first option with the above CSS, in your html use:
如果您选择上述 CSS 的第一个选项，请在您的 html 中使用：
<button type="button" class="btn btn-success btn-outline">success</button>
回答by kayex
FYI it's now been renamed to btn-outline-*
仅供参考，它现在已重命名为 btn-outline-*
回答by Haydar ?ztürk
Are you sure that bootstrap css files works? Because in that code <button type="button" class="btn btn-success-outline">Success</button>it does not specify anything but btn-success-outline (what you said). You should check if your css files works or the other bootstrap documents. it works for me
你确定引导 css 文件有效吗？因为在该代码中<button type="button" class="btn btn-success-outline">Success</button>，除了 btn-success-outline （您所说的）之外，它没有指定任何内容。您应该检查您的 css 文件或其他引导文件是否有效。这个对我有用
回答by daddycardona
the reason your's is not working is that it is btn-outline-success not btn-success-outline.
你的不工作的原因是它是 btn-outline-success 而不是 btn-success-outline。
回答by Alex
Chrome button-outline compatibility issue: in your code <button type="button" class="btn btn-success-outline">Success</button>with bootstrap > 4.1.x I found that including type="button"will break the outline effect on Chrome, but it works in Firefox.
Chrome 按钮轮廓兼容性问题：在<button type="button" class="btn btn-success-outline">Success</button>bootstrap > 4.1.x 的代码中，我发现包含type="button"会破坏 Chrome 上的轮廓效果，但它在 Firefox 中有效。
回答by Nishant Salode
You are using the wrong class for outline.
您正在使用错误的类作为大纲。
It should be btn-outline-success.
应该是btn-outline-success。
Nothing is wrong with bootstrap.
引导程序没有任何问题。
回答by Mamun
If Your Bootstrap work fine. Than You can try this code.
如果您的 Bootstrap 工作正常。比你可以试试这个代码。
<button type="button" class="btn btn-success-outline">Success</button>
plz check your parent div. Is this div use the Float css. If use float than btn need clear:both;
请检查您的父 div。这个 div 是否使用 Float css。如果使用浮点数比 btn 需要 clear:both;
