如何實現行跨度使用引導電網

我想實現一個堆棧是這樣的：如何實現行跨度使用引導電網

http://homedepot.ca

使用jQuery的擴展以實現佈局的影響他們，如果是的話，哪一個？在源頭快速高峯並沒有告訴我太多...

看起來好像他們可能會使用基金會Zurb而不是Bootstrap，因爲我最初假設。也許一個名爲花崗岩的jQuery庫？

我希望最左邊一列承擔所有的垂直和水平空間，而較小的右邊一列將有2或3行較小的圖像。

我需要每個單元格都假定它的最大寬度和高度基本上是whilsty保持響應並在較小的設備上垂直摺疊。

任何想法？

來源

2016-05-17 Alex.Barylski

類似'col-sm-8'的建議使用Bootstrap。你爲什麼不把他們的網站拆開，並且打開http://getbootstrap.com/css/#grid標籤，你應該可以解決這個問題。 '細胞呈現其最大寬度'我不確定你的意思。 Bootstrap cols有一個寬度。你可能意味着像設置寬度：100％的內容在一個col？基本上 - 如果有幫助，你可以在Bootstrap col中嵌入一個Bootstrap行。 – 2016-05-17 16:16:36

一般而言，您應該隨時發佈您想要的代碼或屏幕截圖，因爲此鏈接可以隨時更改。 –

他們在Bootstrap中基本上使用了類似於嵌套行的東西。 http://www.bootply.com/OCSQsH71zp

<div class="container"> 
<div class="row"> 
    <div class="col-md-8">Something</div> 
    <div class="col-md-4"> 
     <div class="row"> 
      <div class="col-md-12">Something</div> 
      <div class="col-md-12">Something</div>  
     </div> 
    </div> 
    </div> 
</div>

你有兩個初始列。在右列中，添加另一行，每列都有兩列，每列都是全角。

來源

2016-05-17 16:22:05

我也這麼認爲 - 但我無法弄清楚左列如何假設右列中兩行的高度？在表中，這將是一個微風使用rowspan –

這是與右側包含兩行的「父」相同的高度。例如，如果您有足夠的內容或背景，可以一路下來，覆蓋與右側排相同數量的房地產，那麼它會看起來不錯。 –

在您提供的示例網站中，他們只是使用列中內容的絕對像素高度設置來實現Rachel S提到的平衡佈局。該高度並不是由Bootstrap的網格系統給出的。 '雙排'欄有一個高度爲544px的div。右側兩行中的內容使用一個262px高的類。 20像素的差距必須被類似地定義。我認爲在Element Inspector中多一點點可以幫助你。 – 2016-05-17 16:53:48

如何實現行跨度使用引導電網

回答

相關問題