Bootstrap 3 - 我想跨列重叠一行（透明）

Question

我正在尝试使用 Bootstrap 复制以下内容 3. 如果没有从左侧延伸到 4 个价格框（列）上方的灰色框，那将不是问题，但我知道我在发现我做错之前可以搞砸几个小时。从哪里开始有什么建议吗？

我是否应该从设置高度的 5 列开始，然后将第 1 列中的文本设置为 100% 的宽度？嗯嗯

编辑： 这是我到目前为止的 jsFiddle。请记住，我是一名开发人员和一名糟糕的设计师（除非是直截了当的事情）。试色选的颜色我都看不下去了，别太苛刻了。

<div class="container">
  <div class="row">
    <div class="col-xs-4 price-descr">
    </div>
    <div class="col-xs-4 price-descr">
      <div class="row descr-spacer">&nbsp;</div>
      <div class="row">Script listings or script renewals</div>
    </div>
    <div class="col-xs-1 text-nowrap img-rounded price-box first">
      <div class="row priceText">1st
        <br />Script</div>
      <div class="row price-spacer">&nbsp;</div>
      <div class="row pricePrice"></div>
    </div>
    <div class="col-xs-1 img-rounded price-box second">
      <div class="row priceText">2nd<br />Script</div>
      <div class="row price-spacer">&nbsp;</div>
      <div class="row pricePrice"></div>
    </div>
    <div class="col-xs-1 img-rounded price-box third">
      <div class="row priceText">3rd<br />Script</div>
      <div class="row price-spacer">&nbsp;</div>
      <div class="row pricePrice"></div>
    </div>
    <div class="col-xs-1 img-rounded price-box fourth">
      <div class="row priceText">4th<br />Script</div>
      <div class="row price-spacer">&nbsp;</div>
      <div class="row pricePrice"></div>
    </div>
  </div>
</div>

Answer 1

希望对您有所帮助。你只需要使用绝对位置重叠。

www.jsfiddle.net/t8oajk5u

Bootstrap 3 - 我想跨列重叠一行（透明）

Bootstrap 3 - I want to overlap a row across columns (with transparency)

twitter-bootstrap-3

overlap