Bootstrap3网格 - 2种背景颜色

Question

如何在下面的图像中产生效果？

我想拥有一个有2列的容器。较小的列应该在黄色背景上，而较大的列应该在白色上。黄色应该从左侧开始，在col-xs-4的右侧结束。

Answer 1

是，使用一个伪元素。

注意这里的一般布局方法并不重要（我用Flexbox进行练习），但伪元素技术是常见的。在你的CSS像.container .COL-XS-4 {背景色：黄}

* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.container { 
 
    width: 50%; 
 
    height: 300px; 
 
    margin: auto; 
 
    border: 1px solid grey; 
 
    display: flex; 
 
} 
 
.container div { 
 
    border: 1px solid green; 
 
} 
 
.left { 
 
    width: 25%; 
 
} 
 
.right { 
 
    width: 75%; 
 
} 
 
/* MAGIC */ 
 

 
body { 
 
    overflow: hidden; 
 
    /* prevent scrollbars */ 
 
} 
 
.left { 
 
    position: relative; 
 
    /* positioning context */ 
 
} 
 
.left:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    width: 50vw; 
 
    /* half viewport width */ 
 
    height: 100%; 
 
    /* parent height */ 
 
    background: orange; 
 
    z-index: -1; 
 
    /* push under parent */ 
 
}

<div class="container"> 
 
    <div class="left"></div> 
 
    <div class="right"></div> 
 
</div>