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所需的类,但我无法成功地完成它.

这是我使用requiered类的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>

有人知道隔离欲望类的方法吗？或者可以指向另一个类似于这个和跨浏览器的拆分按钮的实现？我google了很多,但我找到的唯一可用的是bootstrap.

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

这样,样式表中的规则具有更多优先级.

除此之外,您可能最好不要使用缩小版本的bootstrap,这样您就可以更轻松地删除任何冲突类.

Answer 2

你去getbootstrap.com上的定制器http://getbootstrap.com/customize/

切换你需要的东西:

然后你下载它.

你打开它.查看基本样式和全局box-sizing:border-box.

您可以更改所有CSS以使用box-sizing:border-box(google it),或者将其放在:before,:after和元素上,以及表单,按钮和表单所需的所有引导程序css下拉(他们一起工作).

Answer 3

如本页其他解决方案所述，有以下几种方法：

1. 从引导程序网站创建自定义引导程序 css
2. 在页面上的引导程序样式标签之后放置您不希望引导程序覆盖的自定义样式

根据我的经验，创建自定义引导 css 或编辑它以删除不需要的类或样式规则并不是那么实用。这是因为当新版本的引导程序发布时，您可能需要再次执行繁琐的过程。

相反，您可以继续使用您自己的样式覆盖引导程序样式，放置在引导程序样式之后，另一个步骤将更有效地帮助您防止其他人覆盖您的样式。

您可以在http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/或https://developer.mozilla.org/查看 CSS 样式的特异性en-US/docs/Web/CSS/Specificity

一个例子可能是，写一种风格

.btn {
    background: red;
}

作为

#mypage .btn {
    background: red;
}

其中，mypage可能是页面上最父元素的 ID（可能是 body 标签？）。这将使您的样式规则比引导 CSS 中定义的样式规则更具体，届时它们将不再能够覆盖您的样式规则。

请注意，上面的代码片段只是一个说明，您绝对可以为此编写更好的样式。