Bootstrap 2 Spalten, 2 Hintergrund erweitert

Question

Ich versuche, eine container mit zwei Spalten mit verschiedenen background-color s zu bekommen. Und ich möchte die background jeder Spalte aus ihrer eigenen container erweitern.

Ich habe das versucht, aber ich weiß nicht, ob das die richtige Antwort ist; sollte ich eine overflow: hidden verwenden?

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

Sie wirklich Hintergrundfarben auf Ihren Körper und Behälter verwenden sollten Dinge wie diese und nicht Chaos mit Bootstrap die Spaltenbreite und Überlauf zu behandeln. Das wird dir viele Kopfschmerzen auf der Straße bereiten.

Da Sie Ihre Spalten mithilfe von Haltepunkten stapeln, können Sie eine feste Hintergrundfarbe für body oder einen anderen Wrapper für Ihren Inhalt festlegen und sicherstellen, dass Ihre Zeilen die volle Breite haben.

Wenn Sie zu dem größeren Haltepunkt kommen (wo Ihre Spalten nebeneinander liegen und Ihre Reihe eine feste Breite hat), und Sie wollen, dass das Grau auf der linken Seite ganz nach links und das Grün geht Auf der rechten Seite, um den ganzen Weg nach rechts zu gehen, können Sie ein wenig kreativ mit CSS Hintergrund Gradienten bekommen, um zu erreichen, was Sie suchen.

Zum Beispiel ist hier ein Gradient für den Körper, der halb grau, halb grün ist. Ihr Inhalt kann sitzen direkt über oben drauf, und wenn es Spalte übrig geblieben ist hat den grauen Hintergrund und die rechte Spalte hat den grünen Hintergrund es den Effekt sind Sie nach erreichen ohne Ihre Spalten nachäffen bis:

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 */ 
} 

Diese Die gleiche Logik könnte auf eine 100% Breite <section> oder einen anderen Wrapper angewendet werden, wenn Sie es nicht auf den ganzen Körper anwenden möchten.

Sie müssen nur so etwas implementieren und Ihre Haltepunkte berücksichtigen.

Answer 2

Von Paulie_D's comment (14. September 2016):

Sie müssten auf jeden Fall overflow-x: hidden auf den Körper verwenden, wenn Sie die Breite der Pseudoelemente berechnen kann. Ich würde eine Breite von 100vw lieber als 999em, aber die Wirkung ist das gleiche:

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>