我有这样的事情：引导：不同列的不同颜色
<div class="container">
<div id="row">
<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9"></div>
<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9"></div>
</div>
</div>
现在我希望有不同的大小，像这样一个不同的背景：
.col-xs-12 {
background-color: blue;
}
.col-md-9 {
background-color: yellow;
}
我怎样才能做到这一点？
你必须使用CSS媒体查询。
这是启动时使用断点3--
所以，你的媒体查询应该像下面snippet--
.column1 {
background-color: yellow;
height:200px;
}
@media (min-width: 768px) {
.column1 {
background-color: red;
}
}
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
.column1 {
background-color: blue;
}
}
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
.column1 {
background-color: green;
}}<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<div id="row">
<div class="column1 col-xs-12 col-sm-12 col-md-9 col-lg-9"></div>
<div class="column2 col-xs-12 col-sm-12 col-md-9 col-lg-9"></div>
</div>
</div>媒体查询将是您正在寻找的解决方案 -
我们可以有不同的屏幕和设备尺寸的CSS代码的不同块。在当今世界，用户可以在各种屏幕上查看网页。屏幕可以从工作站上的大屏幕显示器，飞机上的笔记本电脑，到他们的iPad或其他平板电脑，同时坐在公园里，最后在旅途中在他们的小型手机屏幕上显示。
如果你的浏览器支持媒体查询，那么你很好。
不同风格的不同画面：它是如何工作
你一定会想，要实现这一点，你将不得不学习CSS的一个新的篇章。幸运的是，你不必这样做。所需要的只是几行额外的代码，有时候只是几个字。使用媒体查询的最简单方法是在同一个样式表文件中包含一段CSS代码。因此，所有专用于手机的CSS，将在以下块定义：
@media only screen and (max-device-width: 480px) {
/* define mobile specific styles come here */
}
通常我们会为了充分利用CSS的级联属性在文件末尾进行定义。背景颜色，边框和其他常用属性通常会在上面定义，不会在此处进行更改。下面的属性是我们最经常更换的：
例如，假设该公司的标识是600网站桌面版本的像素宽度。现在在一个宽度为480像素的设备上，滚动条会出现，这是不可取的。因此，我们应该有一个较小版本的徽标和CSS文件的应该是这样的：
#logo { background: url(images/logo.png); width: 600px; border: 1px #ccc solid; }
@media only screen and (max-device-width: 480px) {
#logo { background: url(images/logo_mobile.png); width: 440px; }
}
如果你注意到，我们没有过书面徽标border属性，所以边框将继续呈现在移动设备上。
我想补充一个额外的类，并添加媒体查询它们，就像这样：
.color-class { /* for col-xs-12 */
background-color: blue;
}
@media (min-width: 768px) { /* for col-sm-12 */
.color-class {
background-color: yellow;
}
}
col-lg-9 color-class
@media (min-width: 992px) { /* for col-md-9*/
.color-class {
background-color: red;
}
}
@media (min-width: 1200px) { /* for col-lg-9*/
.color-class {
background-color: grey;
}
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div id="row">
<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 color-class">sample text</div>
<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 color-class">sample text</div>
</div>
</div>