覆盖或向引导程序中的预定义类添加样式3

这是关于引导程序3.我想在浏览器重新调整大小时更改预定义引导程序3列的颜色。覆盖或向引导程序中的预定义类添加样式3

下面是的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.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;}

当浏览器的尺寸重新调整，第一列应该有背景颜色为红色，然后为背景颜色为黄色，其次为背景颜色为绿色，最后为背景颜色为蓝色。但是，在浏览器中查看此网页并重新调整大小时，所有列背景颜色都会保持蓝色。

我想更改颜色（覆盖或添加样式到引导程序3中的预定义类）。这怎么能实现？

来源

2014-04-09 Susantha7

这就是所谓的层叠样式表是有原因的...... –

这个解决方案是愚蠢。他们可以添加一个名为“col-sm”，“col-xs”等的类......其中所有其他的“col-xs-1，col-xs-2 ......”将继承。网站很糟糕。 – PedroD

你的问题是，CSS不会在某些宽度上应用某些类的样式，只能通过媒体查询告诉哪些样式规则适用于某些不同宽度的类。 Bootstrap通过使用媒体查询来工作。

仅仅因为你使用引导程序并不意味着它会奇迹般地将媒体查询应用到它自己的类中，并且宽度一定。请参阅http://getbootstrap.com/css/#grid-media-queries以查看bootstrap在内部使用的媒体查询以应用样式规则。媒体查询非常简单，但看起来有点让人望而生畏，你会习惯它们，而且当你在他们身边时，它们会变得有意义。

您的背景蓝色正在发生，因为它是最底层的风格规则，因此它是唯一一个应用，如果只有您可以只显示不同宽度的样式规则。这是媒体查询的目的。它们仅在指定的宽度上应用样式，并以任何其他宽度消失。

这是你想覆盖的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

编辑：

的问题，这是要覆盖自举类，这意味着你要覆盖将要显示的样式。从现在开始，如果你尝试使用引导列，他们将会拥有这些样式，我建议在该元素中添加一个类，并为该类添加样式规则，以代替它。

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

/* 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;} 
}

来源

2014-04-09 07:11:18 John

真的很有帮助！节省大量的时间 – PALEN

试试这样：

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

@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; } 
}

希望这有助于。

来源

2014-04-09 07:07:41 winnyboy5

这是如何覆盖引导类的？以及您如何知道OP需要不同颜色的屏幕尺寸..？ –

@TJ这些是引导程序用来识别设备大小的媒体查询。他希望背景颜色以各种尺寸进行更改。因此，我们可以使用媒体查询来实现相同的功能，而不是使用列类名称。 – winnyboy5

'.colbg'被bootstrap使用..？ –

覆盖或向引导程序中的预定义类添加样式3

回答

相关问题