，在不同的媒体上更改第二列背景颜色

我有一个全宽的条形行;我在里面有一个固定宽度的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

，在不同的媒体上更改第二列背景颜色

回答

相关问题