Bootstrap3網格 - 2種背景顏色

如何在下面的圖像中產生效果？Bootstrap3網格 - 2種背景顏色

我想擁有一個有2列的容器。較小的列應該在黃色背景上，而較大的列應該在白色上。黃色應該從左側開始，在col-xs-4的右側結束。

Example

來源

2015-10-23 user3573535

給予類 –

那麼背景將是隻在此列，而是應該從左側開始身體。 Conrtiner不像你看到的那樣流暢！ – user3573535

如果您使用的是具有兩列的容器類，則意味着從左側沒有空間。請探討這個問題。 –

是，使用一個僞元素。

注意這裏的一般佈局方法並不重要（我用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>

來源

2015-10-23 10:04:08

很棒！這種方法對我來說很好。謝謝。 – user3573535

Bootstrap3網格 - 2種背景顏色

回答

相關問題