页面上的引导按钮样式不同答案

【问题标题】：Bootstrap button style is different on page页面上的引导按钮样式不同
【发布时间】：2021-01-20 02:10:23
【问题描述】：

在任何我使用引导按钮（如<a href="#" class="btn btn-success">Button</a>）的地方，它看起来都很好，而且是我想要的。但是，我在 jQuery UI div 中的另一个页面上使用相同的按钮。所以如果我使用按钮，文本是黑色的（应该是白色的）并且颜色是关闭的。

我知道我可以手动覆盖样式，但我只是想知道有人知道为什么会这样吗？有没有我可以像往常一样使用相同的线路。

这是我的代码中如何编写它的示例：

<div id="tabs">
    <form>
        <div id="tabs-1">
            <div class="form-control">
                <a href="#" class="btn btn-success">Button</a>
            </div>
        </div>
    </form>
</div>

【问题讨论】：

jQueryUI 和 Bootstrap 的默认实例不兼容。您将需要手动修改 JS 和 CSS 中的不兼容性（无论在您的情况下是什么），或者删除其中一个并为您的 UI 仅使用一个库。我会推荐后者。
@RoryMcCrossan 啊，谢谢，我在想 Bootstrap 和 jQueryUI 不喜欢对方，但不确定。

标签： html jquery bootstrap-4

【解决方案1】：

.btn-success{color:#fff;background-color:#28a745;border-color:#28a745}                           
.btn-success:hover{color:#fff;background-color:#218838;border-color:#1e7e34}                    
.btn-success.focus,.btn-success:focus{color:#fff;background-color:#218838;border-color:#1e7e34;box-shadow:0 0 0 .2rem rgba(72,180,97,.5)}

代码对我有用。但是，如果它不适合您，那么您可以直接将上述代码添加到样式中，而无需删除引导样式链接。此代码具有相同的样式。

谢谢

【讨论】：