覆蓋或向引導程序中的預定義類添加樣式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

回答

相關問題