Einstellen der Größe der Hintergrundfarbe

Question

Ich benutze Bootstrap und derzeit ein Problem mit der Hintergrundfarbe Größe. Hier ist die bootply.

Ich möchte meine graue Hintergrundfarbe Größe so, dass es zwischen den beiden roten Balken ist. Hier sind meine HTML und CSS:

<div class="col-sm-1"> </div> 
<div class="col-sm-10 top-con"> 
    <div class="col-md-2 hidden-sm hidden-xs"> 

     <div class="bar bar-first"> </div> 

    </div> 

    <div class="col-md-4 dashfolio-profile-pic-connect-container"> 
     <!-- content here --> 

    </div> 

    <div class="col-md-4 dashfolio-profile-name-container"> 
     <!-- content here -->  
    </div> 

    <div class="col-md-2 hidden-sm hidden-xs right-bars"> 

     <div class="bar bar-sixth"> </div> 

    </div> 

</div> 

<div class="col-sm-1"> </div> 

CSS:

top-con { 
    background: gray; 
    } 

.bar { 
    width: 30px; 
    height: 100px; 
    background: red; 
    display: inline-block; 
    margin-left: -5px; 
    padding: 0; 
    } 

Ich habe versucht, die Kinder des top-con Elements in einer separaten wrap Klasse zu wickeln und versuchte, eine Farbe, um es zuzuordnen, wie hier gezeigt - bootply.com, aber dies zeigt nicht einmal die Farbe. Bitte helfen Sie. Das beabsichtigte Ergebnis ist, dass das Grau innerhalb der roten Balken liegt. Vielen Dank!

Answer 1

Sie sollten background-color nicht auf top-con anwenden. Da ist es auch der Container für den red Hintergrund <div>. Wenden Sie also den Knoten background für die Knoten child anstelle des übergeordneten Knotens an. Dann kommt auf die nächste Frage

Ich habe versucht, die Kinder des Top-con-Elements in einer separaten Wickel Klasse zu wickeln und versuchte

Diese zuzuordnen ist, weil es nicht bekannt ist, Höhe für die graue <div>. Ordnen Sie die Höhe also separat zu. Siehe die BootPly