2016-08-04 79 views
0

我試圖使用Bootstrap 3複製下面的內容。如果沒有從左邊的4個價格框(列)延伸的灰色框,它不會'這是一個問題,但我知道在發現我做錯了之前,我可以解決這個問題好幾個小時。任何建議從哪裏開始?Bootstrap 3 - 我想橫跨列重疊一行(具有透明度)

Price Structure

我應該開始用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> 
+0

請您粘貼代碼jsbin向我們展示你已經有多遠工作? –

+0

它實際上不是一個問題,使6列大小「2」,並在那裏做你的腳本之後,再做一個12列div與絕對位置,並通過做CSS屬性拖動到底部。 –

回答

1

我希望這會幫助你。你只需要使用位置絕對重疊。

www.jsfiddle.net/t8oajk5u