Bootstrap网格布局（跨度行？）

Question

我正在开发一个需要响应式信息图表样式页面的Boostrap v3项目。

我无法弄清楚如何以我需要的方式做到这一点。我在跨越单行方面取得了有限的成功，但无法按照需要的方式使布局工作（如图所示）。

有没有人建议如何实现所需的布局？ （如果它甚至可能是自举网格布局）。

Answer 1

我认为您可以创建一个包含所有12个网格元素的div容器，然后在该div中创建一个表。

在使用colspan和rowspan的表格中，您可以找到所需的功能。

Answer 2

这是我的尝试。请检查：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>