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>