如何使用垂直偏移将 Bootstrap 列拉到顶部？

Question

我正在使用 bootstrap 并且我正在尝试将左上角的列设为 id= "related-items-box" 与其他三列大小相同的列。如果id的top, middle, bottom的columns变大，那么左边的column会和4个column一样大，看起来像一个大矩形。

这就是我想要得到的：

Desired Result

这就是我所拥有的：

Current Output

这是源代码：

<div class="container">
        <div class="row show-grid">
          <div class="col-md-8" id="related-items-box">.col-md-8</div>
          <div class="col-md-4" id="top">.col-md-4 col-md-offset-8</div>
          <div class="col-md-4 col-md-offset-8" id="middle">.col-md-4 col-md-offset-8</div>
          <div class="col-md-4 col-md-offset-8" id="bottom">.col-md-4 col-md-offset-8</div>
        </div>
        <div class="row show-grid">
          <div class="col-md-12">.col-md-12</div>
        </div>
      </div>

我该如何解决这个问题？

Answer 1

试试这个：

<div class="container">
    <div class="row show-grid">
      <div class="col-md-8" id="related-items-box">.col-md-8</div>
      <div class="col-md-4" id="top">
          <div class="row">
              <div class="col-md-12"></div>
             <div class="col-md-12"></div>
             <div class="col-md-12"></div>
          </div>
      </div>
    <div class="row show-grid">
      <div class="col-md-12">.col-md-12</div>
    </div>
  </div>

Answer 2

我想这就是您要找的...

<div class="container">
        <div class="row show-grid">
          <div class="col-md-8 col-sm-8 col-xs-8" id="related-items-box"></div>
          <div class="col-md-4 col-sm-4 col-xs-4" id="top"></div>
          <div class="col-md-4 col-sm-4 col-xs-4" id="middle"></div>
          <div class="col-md-4 col-sm-4 col-xs-4" id="bottom"></div>
        </div>
        <div class="row show-grid">
          <div class="col-md-12">.col-md-12</div>
        </div>
      </div>

https://jsfiddle.net/beardedmike/5o5m3wrs/

如何使用垂直偏移将 Bootstrap 列拉到顶部？

How to Pull to the top a Bootstrap Column using vertical offset?

html

css

offset

twitter-bootstrap