如何在引导程序中与行底部对齐？

Question

我试图对齐我的行div或无论如何最后一个元素.我正在使用bootstrap 3,我有:

<div id="main">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="logo col-centered">
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12 title text-center">THE TITLE</div>
    </div>
    <div class="row">
      <div class="col-md-5 col-centered text-center description">Lorem ipsum</div>
      <div class="description_arrow col-centered"></div>
    </div>
    <div class="row">
      <div class="col-md-5 col-sm-8 col-xs-12 col-centered">
        <div class="image-container">
          <img id="image-phone" src="img/image-phone.png" class="img-responsive" style="bottom:0px;">
        </div>
      </div>
    </div>
  </div>
</div>

在css我有:

#main {
  min-height: 100%;
}

现在看起来如此:

|------------------------|
|==========ROW===========|
|==========ROW===========|
|==========ROW===========|
|==========SPACE=========|
|==========SPACE=========|
|------------------------|

我希望看起来如此:现在看起来如此:

|------------------------|
|==========ROW===========|
|==========ROW===========|
|==========SPACE=========|
|==========SPACE=========|
|==========ROW===========|
|------------------------|

所以我想把最后一行留在底部,我该怎么做？

编辑:我不能在2°DIV使用下边距,因为2°行格和最后一行的div之间的距离,可以改变的,我不想和高价值的,因为那时的13" 屏幕页面变得可滚动.

EDIT2:我不能使用position:fixed和bottom:0,因为在div #main下,我有其他div(总是100%高度).

解决方法1: 我这样做:

<div id="main" style="position: relative;">

在行div类我做:

<div class="row" style="position:absolute; bottom: 0px; width: 100%;">

似乎工作得很好,但我不知道这是不是一个好的解决方案...请给我一个反馈!

Answer 1

一个解决方案是，如果你加入到div与类容器类d-flex，flex-column和h-100。

然后你需要到mt-auto最后row。这将为屏幕上剩余的所有空间添加一个边距。所以这适用于所有屏幕尺寸。

同样重要的是，html中，body上面的所有元素div与类container使用完整的高度。您可以使用以下 css 实现此目的：

html, body {
  height: 100%;
}

html, body {
  height: 100%;
}

Answer 2

如果我理解正确 - 你不能只添加margin-bottom到第二行来创建第二行和第三行之间的垂直空间吗？

另请注意，col-12's 可以只是容器内的 div，它们不需要 row 或 col-12 类。