将col-xs-12更改为col-md-6颜色响应

Question

我有一个容器分为两种不同颜色的col-md-6。

让我们说一个是绿色，另一个是黄色。

我正在尝试将这两个列转换为一个col-xs-12，其渐变颜色来自，正如您所期望的绿色 - ＆gt;黄色。

玉：

.container-six
 .row
  .col-xs-12.col-md-6.left
  .col-md-6.right

书写笔：

.container-six
 height: 150px
 background-color: white
 .row
  height:100%
  .col-xs-12
   height  150px
   background: linear-gradient(to left,#ff8533,#99ccff)
  .col-xs-12.col-md-6.left
    background-color:#ff8533
  .right
    background-color:#99ccff

Answer 1

如果您想将 col-md-6 div合并到 col-xs-12 ，请删除样式属性并使用属性为主div

背景：线性渐变（右边，＃92af4c，＃fff707）;

Answer 2

这是你想要达到的目标吗？

/* Heart of the matter */
.row.two-colors {
  background: -webkit-linear-gradient( 0deg, yellow, green);
  background:    -moz-linear-gradient( 0deg, yellow, green);
  background:      -o-linear-gradient( 0deg, yellow, green);
  background:         linear-gradient(90deg, yellow, green);
}
@media (min-width: 992px) {
  .row.two-colors > div:first-child {
    background: yellow;
  }
  .row.two-colors > div:last-child {
    background: green;
  }
}

/* Decorations */
.row.two-colors > div {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
  min-height: 100px;
  padding-top: 6px; 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">
  <div class="row two-colors">
    <div class="col-md-6">First</div>
    <div class="col-md-6">Second</div>
  </div>
</div>