使用bootstrap3，如何将容器向下移动到页面中间？

Question

HTML：

<header class="container-fluid">
  <div class="row">
    <div class="col-md-6">
      <h1>Left-half</h1>
    </div>
    <div class="col-md-6">
      <h1>Right-half</h1>
    </div>
  </div>
</header>

LESS：

header {
  position: relative;
  top: 50%;
}

我尝试使用＆＃34; position：absolute;＆＃34;，它确实将我的标题类移动到我想要的位置，但随后它将两列压缩到我页面的左半部分

Answer 1

如果您将top更改为margin-top，则会将您的标题向下移动。

header {
  position: relative;
  margin-top: 25%;
}

看起来50％会造成太大的余量，不确定这是否是Bootply问题。 25％看起来更像是Bootply的一半（ Demo Here ），尽管你可以随意使用它来满足你的需求。