Question

我想绘制一个填充整个Bootstrap列和行的背景颜色。目前，彩色区域（下面是id为html_overlay的元素）与指定的文本宽度完全匹配，而不是列宽。有什么想法吗？

HTML：

<div class="container">
  <div class="row">
    <div class="col-sm-2 col-lg-1">.col-sm-2
      <a class="btn btn-primary pull-left" id="br_button" href="do_something">Button</a>
    </div>
    <div class="col-sm-10  col-lg-11">outer .col-sm-10
      <div class="col-sm-12 col-md-11">inner .col-sm-10
        <div id='html_overlay'>
          <div id="heading_area">
            <h3>This entire column should have the background colour</h3>
          </div>
          <div class="wrapper" id="my_title"></div>
          <div class="row">
            <div class="col-xs-2 col-sm-2 col-md-3">
              <div class="wrapper" id="l_space_area"></div>
            </div>
            <div class="col-xs-8 col-sm-8 col-md-7">
              <div class="wrapper" id="text_area">
                <h1 id="my_text"></h1>
              </div>
            </div>
            <div class="col-xs-2 col-sm-2 col-md-3">
              <div class="wrapper" id="r_space_area"></div>
            </div>
          </div>
        </div>
        <!-- overlay -->
      </div>
      <div class="col-sm-0 col-md-1">inner .col-sm-2</div>
    </div>
    <!-- outer second column -->
  </div>
</div>
<!-- container -->

的CSS：

body {
  font-family: sans-serif;
  background-color: #B3E5FC;
  font-size: 100%
}

#container {
  position: relative
}

#html_overlay {
  position: absolute;
  top: 0;
  z-index: 100;
  background-color: rgba(246, 250, 251, 0.9);
  border: 1px solid;
  border-color: rgba(0, 0, 0, 0.5);
}

#text_area {
  z-index: 10;
  bottom: 0;
}

Answer 1

在类#html_overlay

中添加左：0和右：0

Bootstrap用颜色填充整个列

1 个答案: