html - Bootstrap 3 垂直对齐

Question

使用 Bootstrap 3，我正在努力处理 DIV 的垂直对齐。我对所有不同的 css DISPLAY 类型感到迷惑。

我有一段代码，其中包含采用完整视口(viewport)的响应式图像。页面中央显示一个TITLE。

这是遗留代码。您可以在此处的 CODEPEN 中找到它: http://codepen.io/ocleyman/pen/xGKYap

现在我想添加另一个 DIV，其内容将显示在图像底部(视口(viewport)底部)。我尝试添加带有一些 CSS 的 DIV 以将其放在底部。但无法成功。我认为 BOOTSTRAP 是向左浮动的元素。所以我尝试使用这样剪断的 css:

display: inline-block;
vertical-align: bottom;
float: none;

我很确定我误用了显示类型。

这是 CODEPEN 尝试: http://codepen.io/ocleyman/pen/PwRBdx

Answer 1

Bootstrap 逻辑通常是这样的:container-row-col。首先，删除不需要的额外标记:

<header class="intro container" id="intro">
<div class="intro-title row">
  <div class="col-md-8 col-md-offset-2 frame">
                <h1>TITLE</h1>
            </div>
</div>
 <div class="intro-bottom row">
<div class="col-md-8 col-md-offset-2 frame">
                <h2>bottom</h2>
            </div>
</div>
</header>

CSS 还需要一些清理和添加:

.intro .intro-title{
  margin-bottom: 10px;
}

.intro .intro-bottom{
  position: relative;
  bottom: -60%;
}

也许我误解了你的意图，但你可以玩相对定位来获得你想要的。