Html CSS Bootstrap 覆盖了我自己的 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26133742/
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
CSS Bootstrap overrides my own CSS
提问by Joe
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:
我正在尝试在我的网站 (ASPNET WebForms) 中创建一个拆分按钮。到目前为止，我喜欢的唯一拆分按钮实现是来自 Bootstrap 的实现。我没有使用他们框架的任何其他功能。但是，一旦我插入：
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
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.
我自己的css是一团糟。我试图只隔离我需要 splitbutton 的类，但我无法成功地做到这一点。
This is my html code for the splitbutton with the requiered classes
这是我的带有所需类的拆分按钮的 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>
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.
有人知道隔离欲望类的方法吗？或者可能会指向我类似于这个和跨浏览器的拆分按钮的另一种实现？我用谷歌搜索了很多，但我找到的唯一可用的是引导程序。
回答by Bryan
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">
So any styles declared in bootstrap css will override yours. instead try
因此，在 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">
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.
除此之外，您最好不要使用引导程序的缩小版本，这样您就可以更轻松地删除任何冲突的类。
回答by Christina
You go to the Customizer on getbootstrap.com http://getbootstrap.com/customize/
你去 getbootstrap.com http://getbootstrap.com/customize/上的定制器
Toggle the stuff you need:
切换你需要的东西：
Then you download it.
然后你下载它。
You open it up. Look at the base styles and the global box-sizing:border-box.
你打开它。查看基本样式和全局 box-sizing:border-box。
Either you change all your CSS to work with box-sizing: border-box (google it), or you put that on the :before, :after, and element on all the bootstrap css that you need for forms, buttons, and the dropdown (they work together).
要么更改所有 CSS 以使用 box-sizing: border-box（google it），要么将其放在表单、按钮和所需的所有引导 css 上的 :before、:after 和元素上下拉菜单（它们一起工作）。
回答by myTerminal
As mentioned in the other solutions on this page, there are ways like:
如本页其他解决方案所述，有以下几种方法：
- Creating a custom bootstrap css from the bootstrap website
- Placing your custom styles that you do not want bootstrap to override, after the bootstrap style tags on the page
- 从引导程序网站创建自定义引导程序 css
- 在页面上的引导程序样式标签之后放置您不希望引导程序覆盖的自定义样式
According to my experience, creating a custom bootstrap css or editing it to remove unrequired classes or style-rules is not so practical. This is because when a newer version of bootstrap is out, you might need to go through the cumbersome procedure again.
根据我的经验，创建自定义引导 css 或编辑它以删除不需要的类或样式规则并不是那么实用。这是因为当新版本的引导程序发布时，您可能需要再次执行繁琐的过程。
Instead, you could go ahead with overriding the bootstrap styles with your own styles, placed after the bootstrap styles, with another step that will more effectively help you to prevent others from overriding your styles.
相反，您可以继续使用您自己的样式覆盖引导程序样式，放置在引导程序样式之后，另一个步骤将更有效地帮助您防止其他人覆盖您的样式。
You can have a look at specificity of CSS styles at http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/or https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
您可以在http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/或https://developer.mozilla.org/查看 CSS 样式的特异性en-US/docs/Web/CSS/Specificity
One example could be, writing a style
一个例子可能是，写一种风格
.btn {
background: red;
}
as
作为
#mypage .btn {
background: red;
}
where, mypagecould be an ID of a parent-most element on the page (may be the body tag?).
This would make your style rules more specific than the ones that are defined in the bootstrap CSS, they will no longer be able to override yours then.
其中，mypage可能是页面上最父元素的 ID（可能是 body 标签？）。这将使您的样式规则比引导 CSS 中定义的样式规则更具体，届时它们将不再能够覆盖您的样式规则。
Please note that the above code snippet is just an illustration, and you could definitely write better styles for the cause.
请注意，上面的代码片段只是一个说明，您绝对可以为此编写更好的样式。
回答by ndesign11
make your stylesheet the last imported css file.
使您的样式表成为最后导入的 css 文件。
回答by Jared Eitnier
I'm not sure if this will answer your question exactly but what I do in all my BS 3 projects is:
我不确定这是否能准确回答您的问题，但我在所有 BS 3 项目中所做的是：
In my header:
在我的标题中：
<link rel="stylesheet" href="custom.css">
In custom.css
在 custom.css
@import boostrap.less // or the fully compiled bootstrap css
// all your custom stuff, overrides, etc. down here
This way we load up boostrap first but anything custom you want to do will be loaded last meaning your chances of overriding are high and won't cause conflicts. Also it's one line and a lot cleaner for your <head>
这样我们首先加载 boostrap，但是您想要做的任何自定义都将最后加载，这意味着您覆盖的机会很高并且不会引起冲突。它也是一条线，对您来说更干净<head>
回答by Luke
So simple use less to strip out the BS components you don't need. Compile and minify a bootstrap.min.css file and then import this into your stylesheet using:
如此简单使用 less 去除不需要的 BS 组件。编译并缩小 bootstrap.min.css 文件，然后使用以下命令将其导入样式表：
@import url("bootstrap.min.css"); at the top. Then in your HTML simply include your CSS and these will be read after.
@import url("bootstrap.min.css"); 在顶部。然后在您的 HTML 中简单地包含您的 CSS，这些将在之后被读取。
回答by madaimartin
As they said before, the bootstrap css importation must be before the custom css. Like this:
正如他们之前所说，引导 css 导入必须在自定义 css 之前。像这样：
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" >
<link rel="stylesheet" href="css/styles.css">
