ブートストラップグリッドレイアウト（スパン行？）

Question

私は、応答可能なインフォグラフィックスタイルページを必要とするBoostrap v3プロジェクトに取り組んでいます。

私が必要とする方法でこれを行う方法を理解できません。私は1行に及ぶのには限界がありましたが、必要な方法でレイアウトを実行することはできません（この記事の画像に示されています）。

希望のレイアウトをどのように達成するための提案がありますか？ （可能であればブートストラップグリッドレイアウト）。

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の内側にテーブルを作成することができると思います。

in colspanとrowspanを使用すると、目的の機能を見つけることができます。