Html 设置背景颜色的大小

我正在使用引导，目前面临着背景颜色大小的问题。这是我的建议

我希望我的灰色背景颜色的大小在两个红色条之间。以下是我的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> 

---

我尝试将

top con

元素的子元素包装在一个单独的

wrap

类中，并尝试为其指定一种颜色，如图所示-，但这甚至没有显示颜色。请帮忙。预期结果是灰色在红色条内。谢谢

您不应将

背景色

应用于

top con

。因为它也是红色背景的容器。因此，将

背景应用于
子节点，而不是父节点。接下来是你的下一个问题

我尝试将top con元素的子元素包装在一个单独的包装类中，并尝试分配

这是因为灰色
的高度未知。因此，分别指定高度。参考

top-con {
  background: gray;
  }

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