CSS Bootstrap覆盖了我自己的CSS [英] CSS Bootstrap overrides my own CSS

问题描述

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

I am trying to create a split-button in my website (ASPNET WebForms). So far the only split-button implementation I like is the one from Bootstrap. I am not using any other feature of their framework. However, as soon as I insert:

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

我自己的CSS很乱。我试图只隔离我需要splitbutton的类，但是我无法成功实现。

My own css is a mess. I tried to isolate only the classes I would need for splitbutton, but I was not able to successfully do it.

这是我的带有所需类的splitbutton的html代码

This is my html code for the splitbutton with the requiered classes

<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>

有人知道隔离欲望等级的方法吗？还是可以让我指出与该跨浏览器类似的splitbutton的另一种实现？我在Google上搜索了很多，但发现的唯一可用的是bootstrap。

Does anybody know a way to isolate the desire classes? Or may be point me to another implementation of a splitbutton that is similar to this one and cross-browser? I googled a lot but the only usable one I found was bootstrap.

推荐答案

一个好的经验法则。始终将样式表与您想成为最权威的规则放在一起。您可能有

A good rule of thumb. Always put the stylesheet with the rules you want to be most authoritative last. You probably have

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

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

So any styles declared in bootstrap css will override yours. instead try

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

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

This way the rules in your stylesheet have more precedence.

除此之外，最好不要使用引导程序的缩小版本，以便可以轻松删除任何冲突的类。

Aside from that, you may be better off not using the minified version of bootstrap so you can remove any conflicting classes easier.

这篇关于CSS Bootstrap覆盖了我自己的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！