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节点，而不是父节点。然后来到你的下一个问题

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

这是因为灰色<div>的高度未知。所以分别指定高度。请参阅BootPly

设置背景颜色的大小

1 个答案: