CSS Bootstrap 覆盖了我自己的 CSS

Question

我正在尝试在我的网站 (ASPNET WebForms) 中创建一个拆分按钮。到目前为止，我唯一喜欢的拆分按钮实现是来自 Bootstrap 的实现。我没有使用他们框架的任何其他功能。但是，一旦我插入：

 <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">

我自己的CSS一团糟。我试图只隔离 splitbutton 所需的类，但我无法成功地做到这一点。

这是我的带有所需类的拆分按钮的 html 代码

<div class="btn-group">
                          <button type="button" onclick="NewPost();return false;" class="btn btn-primary">Enviar</button>
                          <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span><span class="sr-only">Toggle Dropdown</span></button>
                          <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Enviar con notificaciones</a></li>
                          </ul>
                    </div>

有谁知道隔离欲望类的方法吗？或者可能会指出另一个与此类似且跨浏览器的拆分按钮的实现？我在谷歌上搜索了很多，但我发现唯一可用的是引导程序。

原文由 Joe 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

一个好的经验法则。始终将带有您希望最权威的规则的样式表放在最后。你可能有

<link rel="stylesheet" href="/css/mystyles.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">

因此，在 bootstrap css 中声明的任何样式都将覆盖您的样式。而是尝试

 <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/mystyles.css">

这样，样式表中的规则具有更高的优先级。

除此之外，您最好不要使用缩小版的引导程序，这样您就可以更轻松地删除任何冲突的类。

原文由 Bryan 发布，翻译遵循 CC BY-SA 3.0 许可协议