如何使用引导网格获得垂直间距？

Question

我很难将自己的思维包裹在如何与bootstrap grid system实现垂直间距的过程中。我想要一个盒子从顶部和左边是1/3，另一个从底部拿出1/3，但是是全宽的。我现在有三行，分别是12,6和12列：

使用draw.io的示例布局：

在body的{​​{1}}标记内：

index.html

Answer 1

一个技巧是强制容器的高度用一行jQuery填充整个页面。你不需要jQuery，但我注意到你已经把它包含在你的页面上了。

标记：

<div class="container full-page-height">
  <div class="row offset-top-third">
    <div class="col-md-6 col-md-offset-3 white">
      <h1>Hey you!</h1>
    </div>
  </div>
  <div class="row offset-bottom-third">
    <div class="bgimg">Background image here</div>
  </div>
</div>

CSS：

.bgimg {
    background: #333;
    color: #eee;
}

.white {
    background: #fff;
}

.offset-top-third {
    position:relative;
    top: 33.333%;
    height: 33.333%;
    background: #888;
}

.offset-bottom-third {
    position:relative;
    top: 66.667%;
    height: 33.333%;
    background: #888;
}

Javascript：

$(function() {
  var h = window.innerHeight;
  $(".full-page-height").css({height: h});
});

bootply。

Answer 2

如果您的垂直列是div，则为每个列提供一个margin像素值，以使它们彼此远离。然后将每列的width设置为百分比值，以使它们适合整个窗口。