div flexbox内的Bootstrap 4 align-items-bottom答案

【问题标题】：Bootstrap 4 align-items-bottom inside div flexboxdiv flexbox内的Bootstrap 4 align-items-bottom
【发布时间】：2018-07-24 11:35:26
【问题描述】：

这很简单。我正在尝试将齿轮 svg 图像的底部对齐项目底部到 div 的底部中心。但是，它始终保持在 div 的顶部。我尝试了 align-items-center 和 align-bottom 选项。

会发生什么

应该如何

.gear {
  height: 50px;
	}
.banner {
  height: 70px;
}

<footer>
  <div class="container-fluid orange-bg banner d-flex justify-content-center align-items-bottom">
	<img class="gear d-flex" src="/assets/gear.svg">
</div>
</footer>

【问题讨论】：

标签： flexbox alignment bootstrap-4

【解决方案1】：

行和列是您在 Bootstrap 中的朋友。

因此，创建一对，将您的图像/SVG 放入其中，将类 d-flex 应用于列，并将 mt-auto (margin-top:auto) 应用于图像。

点击下方“运行代码sn-p”按钮：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<footer>
    <div class="container-fluid bg-warning banner d-flex justify-content-center">
        <div class="row" style="height: 60px;">
           <div class="col d-flex">
               <img class="gear mt-auto" src="https://placehold.it/30">
           </div>
       </div>
    </div>
</footer>

【讨论】：

【解决方案2】：

没有align-items-bottom 类。类名是align-items-end..

<div class="container-fluid orange-bg banner d-flex justify-content-center align-items-end">
        <img class="gear d-flex" src="//placehold.it/300x70">
</div>

https://www.codeply.com/go/ub6hNpd9TL

【讨论】：