引導，以行跨度

嗨複雜的嵌套列我想實現的東西像下面的圖片中顯示（使用引導3.3.2）引導，以行跨度

enter image description here

我成功地創建了第一個塊（第一個圖像可以這麼說吧）但是有可能創建設計的方式，它會自動轉換爲圖像中的第二個設計？

我很努力（不確定是否有可能）。需要注意的一件重要事情是，第一個設計中的Ad1必須跨越兩個第一行。不幸的是，在ad1下面開始row2並不是一個選項。

這裏是我的第一個塊的幫助

編輯

我加入了要求的jsfiddle由

<div class="row"> 
    <div class="col-sm-12 col-lg-8 "> 
    <div class="row"> 
     <div col-sm-4 col-lg-4 "> 
      Img1 
     </div> 
     <div class="news-entry-content col-sm-8 col-lg-8 "> 
      Text1 
     </div> 
    </div> 
    <div class="row"> 
     <div class="news-entry-image col-sm-4 col-lg-4"> 
      Img2 
     </div> 
     <div class="news-entry-content col-sm-8 col-lg-8"> 
      Text2 
     </div> 
    </div> 
</div> 
<div class="col-sm-12 col-lg-4" title="First News Werbiung"> 
    Ad1 
</div>

感謝 http://jsfiddle.net/v0r5y7q9/

只是玩弄寬度。你會注意到兩個問題。

隨着一個大寬度：廣告被放置下面（IMG2 +文本2），我希望它下面放置（IMG3 +文本3）
寬度較窄：（IMG3 +文本3）是與其他行相比。有道理，考慮我是如何構建整個事情的。對此的一個解決方案可能是負邊界。還是有更好的解決方案？

謝謝。

來源

2015-03-13 Arikael

你能用完整的代碼創建一個小提琴嗎？ – 2015-03-13 08:06:54

我在問題中加了一個提琴 – Arikael 2015-03-13 09:06:28

這可能是一個解決辦法：jsfiddle

see jsfiddle link

這兩個廣告塊可見/隱藏，但我沒有找到一個更好的解決方案。

p.s.如何直接在帖子中放置jsfiddle-link？

來源

2015-03-13 10:38:27 crealex

在這裏你可以找到如何添加鏈接到你的文章：http://stackoverflow.com/editing-help#links – 2015-03-13 12:16:15

沒有... really..sorry，但它不起作用。我得到一個錯誤，jsfiddle鏈接必須被放置爲代碼...我不知道...我只是覺得愚蠢...對不起 – crealex 2015-03-13 14:33:44

... ahh..finally ...「伴隨的代碼」。 ..謝謝 – crealex 2015-03-13 14:39:47

如果您的項目上的元素的高度是固定的，我會用這個週轉來得到你想要的。只需將您的添加改爲絕對位置並將其放置在元素的底部即可。如在此fiddle

@media only screen and (max-width : 500px) { 

    .ad1 { 
    position:absolute; 
    /*and bottom:x based on the height of your elements*/ 

}}

來源

2015-03-13 08:32:03

引導，以行跨度

回答

相關問題