Bootstrap 3 - 我希望在列之间重叠一行（具有透明度）

Question

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

我应该从具有设定高度的5列开始，然后使第1列中的文字宽度为100％吗？嗯

修改 这是我到目前为止的jsFiddle。请记住，我是一名开发人员和一名可怜的设计师（除非它是直截了当的）。我甚至无法看到我为样品选择的颜色，所以不要太苛刻。

jsFiddle First Pitiful Attempt

<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">$60</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">$50</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">$40</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">$40</div>
    </div>
  </div>
</div>

Answer 1

我希望这会对你有所帮助。你只需要使用绝对位置来重叠。

www.jsfiddle.net/t8oajk5u