Bootstrap 2列，2背景擴展

Question

我試圖得到一個container與兩欄不同background-color s。而且我希望每列的background能夠擴展出他們自己的container。

我試過了，但我不知道這是否是正確答案;我應該使用overflow: hidden？

CodePen Example

#skills { 
 
    color: #FFFFFF; 
 
} 
 

 
#skills-box { 
 
    background-color: #1a1a1a; 
 
    padding-right: 130px; 
 
} 
 

 
#skills-box, #time-box { 
 
    min-height: 300px; 
 
} 
 

 
#skills-box:before, 
 
#time-box:before { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    width: 999em; 
 
    top: 0; 
 
    bottom: 0; 
 
} 
 

 
#skills-box:before { 
 
    left: -999em; 
 
    background: #1a1a1a; 
 
} 
 

 
#time-box:before { 
 
    right: -999em; 
 
    background: #ccca14; 
 
} 
 

 
h2 { 
 
    font-size: 40px; 
 
} 
 

 
#time-box { 
 
    background-color: #ccca14; 
 
}

<div class="container" id="skills"> 
 
    <div class="row"> 
 
     <div class="col-md-8" id="skills-box"> 
 
      <h2>Compétences</h2> 
 

 
      <!-- skills bar in JS here --> 
 
     </div> 
 
     <div class="col-md-4" id="time-box"> 
 
      <h2>Je suis dans le web depuis:</h2> 
 
      <p id="dev-time"> 
 

 
      <!-- dev time in JS here --> 
 
      </p> 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

你真的應該用你的身體和容器背景色來處理這樣的事情，而不是亂用引導的列寬和溢出。這會讓你頭痛不已。

由於您正在使用斷點堆疊您的列，因此您可以爲正文或其他包裝物指定一個固定的背景色，並確保您的行是全寬。

當您到達較大的斷點（您的列並排排列並且行具有固定寬度時），並且您希望左側的灰色一直走到左側和綠色在右側的右側，您可以使用CSS背景漸變來獲得一些創意，以實現您所追求的目標。

例如，這裏是一個漸變應用於半灰色，半綠色的身體。你的內容可以坐在直接在它的頂部，如果它的左邊列有灰色的背景，右列有綠色的背景，將實現無弄亂了你的專欄你後的效果：

body {  
    background: -moz-linear-gradient(left, #1a1a1a 0%, #1a1a1a 50%, #ccca14 50%, #ccca14 100%); /* FF3.6-15 */ 
    background: -webkit-linear-gradient(left, #1a1a1a 0%,#1a1a1a 50%,#ccca14 50%,#ccca14 100%); /* Chrome10-25,Safari5.1-6 */ 
    background: linear-gradient(to right, #1a1a1a 0%,#1a1a1a 50%,#ccca14 50%,#ccca14 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1a1a1a', endColorstr='#ccca14',GradientType=1); /* IE6-9 */ 
} 

這如果你不想把它應用到整個身體上，也可以將相同的邏輯應用於100％寬度的<section>或其他包裝。

你只需要實現這樣的事情，並適應你的斷點。

Answer 2

從Paulie_D's comment（2016 9月14日）：

你肯定會需要使用overflow-x: hidden在身上，除非你可以計算出僞元素的寬度。我喜歡的100vw而非999em的寬度，但效果是一樣的：

body { 
 
    overflow-x: hidden; 
 
} 
 

 
#skills { 
 
    color: #FFFFFF; 
 
} 
 

 
#skills-box { 
 
    background-color: #1a1a1a; 
 
    padding-right: 130px; 
 
} 
 

 
#skills-box, #time-box { 
 
    min-height: 300px; 
 
} 
 

 
#skills .col-md-8:before { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    width: calc(25vw); 
 
    top: 0; 
 
    bottom: 0; 
 
    z-index: -1; 
 
} 
 

 
#time-box:before { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    width: 100vw; 
 
    top: 0; 
 
    bottom: 0; 
 
    z-index: -1; 
 
} 
 

 
#skills .col-md-8:before { 
 
    right: 100%; 
 
    background: #1a1a1a; 
 
} 
 

 
#time-box:before { 
 
    left: 0; 
 
    background: #ccca14; 
 
} 
 

 
h2 { 
 
    font-size: 40px; 
 
} 
 

 
#time-box { 
 
    background-color: #ccca14; 
 
}

<div class="container" id="skills"> 
 
    <div class="row"> 
 
     <div class="col-md-8" id="skills-box"> 
 
      <h2>Compétences</h2> 
 

 
      <!-- skills bar in JS here --> 
 
     </div> 
 
     <div class="col-md-4" id="time-box"> 
 
      <h2>Je suis dans le web depuis:</h2> 
 
      <p id="dev-time"> 
 

 
      <!-- dev time in JS here --> 
 
      </p> 
 
     </div> 
 
    </div> 
 
</div>