背景色のサイズを設定する

Question

私はブートストラップを使用していますが、現在背景色のサイズに問題があります。ここにはbootplyがあります。

灰色の背景色のサイズを、2つの赤色のバーの間にあるようにします。ここに私の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：私は別々wrapクラスでtop-con要素の子をラップしようとしましたが、ここに示したように、それに色を割り当てるために試してみた

top-con { 
    background: gray; 
    } 

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

- bootply.com、しかしこれは色を表示しません。助けてください。意図した結果は、グレーが赤色のバーの中にあることです。ありがとう！

Answer 1

background-colorをtop-conに適用しないでください。それはまたredの背景であるので<div>のコンテナです。親ノードの代わりにchildノードにbackgroundを適用します。それから私は、別々のラップクラスでトップ-CON要素の子をラップしようとしたと

を割り当てるために試してみた

あなたの次の質問に来て高さが知られていないためですグレーの場合<div>。したがって、高さを別々に指定してください。 BootPly

を参照してください