Установка размера фона фона

Question

Я использую Bootstrap и в настоящее время сталкиваюсь с проблемой с цветом фона. Вот bootply.

Я хочу, чтобы мой размер серого цвета фона был таким, что он находится между двумя красными полосками. Вот мой HTML и 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; 
    } 

Я пытался обернуть детей из top-con элемента в отдельном wrap класса и попытался присвоить цвет к нему, как показано здесь - bootply.com, но это даже не отображает цвет. Пожалуйста помоги. Предполагаемый результат: серый цвет находится в красных полосах. Благодаря!

Answer 1

Нельзя применять background-color до top-con. Так как это также контейнер для фона red<div>. Поэтому примените background для узлов child, вместо родительского узла. Тогда приходит к следующему вопросу

Я попытался обернуть детей элемента верхнего мошенника в отдельном классе обруча и попытался назначить

Это происходит потому, что не известно, высота для серого <div>. Поэтому назначьте высоту отдельно. См. BootPly