，在不同的媒體上更改第二列背景顏色

我有一個全寬的條形行;我在裏面有一個固定寬度的BS容器，它包含一個有兩個相等列的行。在移動設備上，我想分割兩列以將它們顯示在彼此之下，但是我想要更改右列的顏色。

全寬屏幕（黑色垂直線表示容器邊緣）

移動屏幕

我希望能夠，優選不增加過多的HTML內容或複製條目以實現下面的設計。

我能夠通過複製HTML內容來實現此目的。但是，我相信有更好的解決方案來做到這一點。

#strip{ 
 
    background-color:#EFC75C; 
 
    } 
 

 
#left-col p, #right-col p { 
 
    display: block; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <title></title> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
</head> 
 
<body> 
 
    <div id="hub-container"> 
 
    <div id="strip"> 
 
     <div class="container"> 
 
     <div class="row"> 
 
      <div id="left-col" class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> 
 
      <p>Left col</p> 
 
      </div> 
 
      <div id="right-col" class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> 
 
      <p>Right col</p> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 
</html>

來源

2017-02-15 Zaven Lepedjian

使用media queries來實現這一目標：

CSS

#strip{ 
     background-color:#EFC75C; 
     } 

    #left-col p, #right-col p { 
     display: block; 
    } 

    @media screen and (max-width:767px) { 
     #right-col { 
      background-color: blue; 

     } 
    }

您可能需要在max-width像素值更改爲你想要的水平破發點。

來源

2017-02-15 21:56:01 disinfor

，在不同的媒體上更改第二列背景顏色

回答

相關問題