我有這樣的事情：引導：不同列的不同顏色
<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>