引导4对齐项目底部内部div flexbox

Question

这很简单。我正在尝试将齿轮svg图像的底部对齐 - 底部中心。但是，它总是保持在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>

Answer 1

没有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

Answer 2

行和列是Bootstrap中的朋友。

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

点击＆＃34;运行代码段＆＃34;按钮如下：

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;