如何在 bootstrap 中对齐底部行 div？

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 上使用 margin-bottom，因为 2° 行 div 和最后一行 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%;">

似乎工作得很好，但我不知道这是否是一个好的解决方案……请给我反馈！

原文由 Riccardo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

A solution is if you add to the div with the class container the classes d-flex , flex-column and h-100 .

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

Also important is that the html , the body and all elements above the div with the class container use the full height.您可以使用以下 css 实现此目的：

 html, body {
  height: 100%;
}

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<style>
html, body, #main {
  height: 100%;
}
</style>

<div id="main">
  <div class="container-fluid d-flex flex-column h-100">
    <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 mt-auto mb-3">
      <div class="col-md-5 col-sm-8 col-xs-12 col-centered">
        <div class="image-container">
          <img id="image-phone" src="https://upload.wikimedia.org/wikipedia/commons/f/f7/Stack_Overflow_logo.png" class="img-responsive" style="max-width: 100px; bottom:0px;">
        </div>
      </div>
    </div>
  </div>
</div>

原文由 MrMaavin 发布，翻译遵循 CC BY-SA 4.0 许可协议