Bootstrap網格佈局（跨行？）

Question

我正在開發一個需要響應式圖表樣式頁的Boostrap v3項目。

我不知道如何以我需要的方式做到這一點。我跨越單行有限的成功，但無法按照需要的方式工作（如圖所示）。

有沒有人有關於如何實現所需佈局圖的請求？ （如果它甚至可以引導網格佈局）。

Answer 1

這是我的企圖。請檢查：http://codepen.io/glebkema/pen/LZRjNg

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); 
 

 
img { 
 
    height: auto; 
 
    width: 100%; 
 
} 
 

 
.container { 
 
    margin-bottom: 10px; 
 
} 
 
.row > div { 
 
    margin-top: 10px; 
 
    padding: 0; 
 
} 
 

 
.content { 
 
    background: #ddd; 
 
    padding: 20px 15px 120px; 
 
} 
 

 
.spaces { 
 
    margin-bottom: 80px; 
 
    margin-top: 80px; 
 
} 
 
.space-both { 
 
    padding-left: 16.66666667% !important; /* of the page width */ 
 
    padding-right: 16.66666667% !important; /* of the page width */ 
 
} 
 
.space-right { 
 
    padding-right: 25% !important; /* of the page width */ 
 
} 
 

 
.arrow-both { 
 
    height: calc(100% + 160px) !important; 
 
    position: absolute; 
 
    right: 0; 
 
    top: -80px; 
 
    width: 30% !important; /^ of the block width */ 
 
} 
 
.arrow-down, 
 
.arrow-up { 
 
    height: calc(100% + 80px + 50%); 
 
    position: absolute; 
 
    width: 20%; /^ of the block width */ 
 
} 
 
.arrow-down { 
 
    left: 0; 
 
    top: 0; 
 
} 
 
.arrow-up { 
 
    bottom: 0; 
 
    right: 0; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-7 col-xs-offset-1"> 
 
     <div class="content"> 
 
     <h2>Introduction</h2> 
 
     <p>Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    
 
    <div class="row spaces"> 
 
    <div class="col-xs-10 col-xs-offset-1 space-both"> 
 
     <img class="arrow-down" src="//placehold.it/200x800/666/fff/?text=Arrow" alt=""> 
 
     <img src="//placehold.it/640x512/c69/fff/?text=Video" alt=""> 
 
     <img class="arrow-up" src="//placehold.it/200x800/666/fff/?text=Arrow" alt=""> 
 
    </div> 
 
    </div> 
 
    
 
    <div class="row"> 
 
    <div class="col-xs-7 col-xs-offset-4"> 
 
     <img src="//placehold.it/800x400/69c/fff/?text=Carousel" alt=""> 
 
    </div> 
 
    <div class="col-xs-10 col-xs-offset-1 no-padding"> 
 
     <img src="//placehold.it/900x150/666/fff/?text=Arrow" alt=""> 
 
    </div> 
 
    <div class="col-xs-10 col-xs-offset-1"> 
 
     <div class="content"> 
 
     <h2>List of dates</h2> 
 
     <p>Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    
 
    <div class="row spaces"> 
 
    <div class="col-xs-10 col-xs-offset-1 space-right"> 
 
     <div class="content"> 
 
     <h2>Content</h2> 
 
     <p>Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p> 
 
     </div> 
 
     <img class="arrow-both" src="//placehold.it/400x800/666/fff/?text=Two%20arrows" alt=""> 
 
    </div> 
 
    </div> 
 
    
 
    <div class="row"> 
 
    <div class="col-xs-10 col-xs-offset-1"> 
 
     <div class="content"> 
 
     <h2>More content</h2> 
 
     <p>Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-10 col-xs-offset-1 no-padding"> 
 
     <img src="//placehold.it/900x150/666/fff/?text=Arrow" alt=""> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

我想你可以創建全部12個網格單元一個div容器，然後創建一個DIV中的表。

在表中使用colspan和rowspan你可以找到你想要的功能。