html - 设置背景颜色的大小

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节点，而不是父节点。然后进入下一个问题

I've tried to wrap the children of the top-con element in a seperate wrap class and tried to assign

这是因为灰色的高度未知<div> .所以单独分配高度。引用BootPly