Bootstrap 网格布局（跨行？）

Question

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

我不知道如何按照我需要的方式执行此操作。我在跨越单行方面取得的成功有限，但无法使布局按需要的方式工作（如图所示 post）。

有人对如何实现图中所需的布局有什么建议吗？（如果甚至可能 bootstrap 网格布局）。

Answer 1

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

中创建一个 table

在 table 中使用 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>

Bootstrap 网格布局（跨行？）

Bootstrap Grid Layout (Span Rows?)

wordpress

row

image

grid-layout

twitter-bootstrap-3