Html 覆盖或添加样式到引导程序 3 中的预定义类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22954832/
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
overwrite or add styles to predefined classes in bootstrap 3
提问by Susantha7
This is regarding bootstrap 3. I want to change the colors of predefined bootstrap 3 columns when the browser is re-sized.
这是关于引导程序 3。我想在重新调整浏览器大小时更改预定义引导程序 3 列的颜色。
Here is the code for the index.html:
这是index.html的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Template</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="css/custom.css" rel="stylesheet" type="text/css" media="screen"/>
<!--<link href="css/bootstrap-theme.css" rel="stylesheet" type="text/css" media="screen"/>-->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-9 col-md-4 col-sm-2 col-xs-12 border">one</div>
<div class="col-lg-2 col-md-4 col-sm-8 col-xs-12 border">two</div>
<div class="col-lg-1 col-md-4 col-sm-2 col-xs-12 border">three</div>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
custom.cssfile:
custom.css文件：
.border
{
border:2px solid;
}
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12{background-color:red;}
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12{background-color:yellow;}
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12{background-color:green;}
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12{background-color:blue;}
When the browser is re-sized, the first column should have background color red color, then background color yellow, followed by background color green and then finally background color blue. However when viewing this web page in a browser and re-sizing it, all columns background colors stay blue.
当浏览器重新调整大小时，第一列的背景颜色应该是红色，然后是黄色，然后是绿色，最后是蓝色。但是，在浏览器中查看此网页并调整其大小时，所有列的背景颜色都保持蓝色。
I want to change the colors(overwrite or add styles to predefined classes in bootstrap 3). How can this be achieved?
我想更改颜色（覆盖或添加样式到引导程序 3 中的预定义类）。如何做到这一点？
回答by John
Your problem is that css won't apply the style of certain classes at certain widths it can merely be told what style rules to apply to certain classes at different widths using media queries. Bootstrap works through using media queries.
您的问题是 css 不会在某些宽度上应用某些类的样式，它只能使用媒体查询告诉将哪些样式规则应用于不同宽度的某些类。Bootstrap 通过使用媒体查询来工作。
Just because you are using bootstrap doesn't mean it will magically apply media queries to it's own classes at certain widths. See http://getbootstrap.com/css/#grid-media-queriesto see the media queries bootstrap uses internally to apply there style rules. Media Queries are pretty simple, but may seem a little daunting you'll get used to them and they will make sense while you are around them more.
仅仅因为您使用引导程序并不意味着它会神奇地将媒体查询应用于特定宽度的自己的类。请参阅http://getbootstrap.com/css/#grid-media-queries以查看引导程序在内部使用的媒体查询来应用样式规则。媒体查询非常简单，但如果您习惯了它们，这似乎有点令人生畏，而且当您更多地围绕它们时，它们会变得有意义。
Your background blue is happening, because it is the bottom most style rule so it is the only one being applied if only you could have just the style rules you want to show up at different widths. That is what media queries are for. They apply the styles only at the width they are specified and disappear at any other width.
您的背景蓝色正在发生，因为它是最底层的样式规则，因此如果您可以仅使用要以不同宽度显示的样式规则，那么它就是唯一应用的样式规则。这就是媒体查询的用途。它们仅在指定的宽度处应用样式，并在任何其他宽度处消失。
Here's what you wanted to overwrite the css classes.
这是您想要覆盖 css 类的内容。
css
css
/* Styles go here */
.border
{
border:2px solid;
}
/*screen-xs*/
@media (max-width: 768px) {
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12{background-color:blue;}
}
/*screen-sm*/
@media (min-width: 768px) and (max-width: 992px) {
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12{background-color:green;}
}
/*screen-md*/
@media (min-width: 992px) and (max-width: 1200px) {
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12{background-color:yellow;}
}
/*screen-lg corresponds with col-lg*/
@media (min-width: 1200px) {
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12{background-color:red;}
}
http://plnkr.co/edit/ZQ6QjRMLm07hkb7cBUPW?p=preview
http://plnkr.co/edit/ZQ6QjRMLm07hkb7cBUPW?p=preview
EDIT:
编辑：
The problem with this is you are overwriting the bootstrap classes and that means you are overwriting the styles that will be shown. From now on if you try to use bootstrap columns they will have these styles I suggest instead adding a class to the element and a style rule for that class in place of overwriting it.
问题在于您正在覆盖引导程序类，这意味着您正在覆盖将显示的样式。从现在开始，如果您尝试使用引导列，它们将具有这些样式，我建议改为向元素添加一个类，并为该类添加一个样式规则，而不是覆盖它。
HTML
HTML
<div class="container">
<div class="row">
<div class="col-lg-9 col-md-4 col-sm-2 col-xs-12 border myColoredCol">one</div>
<div class="col-lg-2 col-md-4 col-sm-8 col-xs-12 border myColoredCol">two</div>
<div class="col-lg-1 col-md-4 col-sm-2 col-xs-12 border myColoredCol">three</div>
</div>
</div>
CSS
CSS
/* Styles go here */
.border
{
border:2px solid;
}
/*screen-xs*/
@media (max-width: 768px) {
.myColoredCol{background-color:blue;}
}
/*screen-sm*/
@media (min-width: 768px) and (max-width: 992px) {
.myColoredCol{background-color:green;}
}
/*screen-md*/
@media (min-width: 992px) and (max-width: 1200px) {
.myColoredCol{background-color:yellow;}
}
/*screen-lg corresponds with col-lg*/
@media (min-width: 1200px) {
.myColoredCol{background-color:red;}
}
回答by winnyboy5
Try this:
尝试这个：
HTML
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Template</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="css/custom.css" rel="stylesheet" type="text/css" media="screen"/>
<!--<link href="css/bootstrap-theme.css" rel="stylesheet" type="text/css" media="screen"/>-->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-9 col-md-4 col-sm-2 col-xs-12 border colbg">one</div>
<div class="col-lg-2 col-md-4 col-sm-8 col-xs-12 border colbg">two</div>
<div class="col-lg-1 col-md-4 col-sm-2 col-xs-12 border colbg">three</div>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
CSS
CSS
@media (max-width: 767px) {
.colbg {background-color:blue; }
}
@media (min-width: 768px) and (max-width: 991px) {
.colbg {background-color:green; }
}
@media (min-width: 992px) and (max-width: 1199px) {
.colbg {background-color:yellow; }
}
@media (min-width: 1200px) {
.colbg {background-color:red; }
}
Hope this helps.
希望这可以帮助。
