在页脚中上下对齐两个 div答案

【问题标题】：Align two divs up and down in footer在页脚中上下对齐两个 div
【发布时间】：2018-07-18 05:05:58
【问题描述】：

虽然问题是微不足道的并且被多次询问，但我的困难来自使用 Bootstrap 4 可能或一些冲突。

我想要上下两个 div，固定在底部。居中对齐文本居中对齐。

代码如下：

            <div class="row ">
                <div class="myfooter text-center" style="display: inline-table;">
                    <div class="col-lg-12 col-md-12 ">
                        <div class="col-lg-6 col-md-6">
                            <span class='label label-default'>Copyright &copy; 2018 Some Institute of Sciences, City, Country</span>
                        </div>
                        <div class="col-lg-6 col-md-6">
                            <span class='label label-default'>Developed By: Our Technologies (Pvt.) Ltd.</span>
                        </div>
                    </div>
                </div>
            </div>

风格是：

.myfooter {
        position: fixed;
        height: 30px;
        bottom: 0;
        width: 100%;
        background-color: #21262929;
    }

问题： 如果我将style="display: inline-table;" 更改为block 之类的其他任何内容，则其中一个div 消失。

由于我不是设计师，所以请提供一些可以使用的东西。谢谢

注意：引导页脚类引起了一些问题，我无法追踪。

【问题讨论】：

上下？你的意思是两行？
基本上，如果你在 html 中查看它只有两行。版权和开发者。那么怎么排成两排就好了。

标签： html css twitter-bootstrap-3 bootstrap-4

【解决方案1】：

你可以这样做：

.myfooter {
  background-color: #21262929;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<div class="myfooter container-fluid position-fixed fixed-bottom">
  <div class="row text-center">
    <div class="col-12">
      <span class='label label-default'>Copyright &copy; 2018 Some Institute of Sciences, City, Country</span>
    </div>
    <div class="col-12">
      <span class='label label-default'>Developed By: Our Technologies (Pvt.) Ltd.</span>
    </div>
  </div>
</div>

最好的建议是阅读更多关于boostrap works 的信息，并查看utilities classes，这样可以避免你添加自己的风格。

【讨论】：