与Bootstrap垂直对齐

Question

我想垂直对齐2格，一个居中，另一个居下。 我也想通过使用bootstrap grid来实现这一点。

我的组件

.loading{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
.loading-data{
  border-radius: 10px;
  height:calc(100% - 100px);
  width: calc(100% - 100px);
  top: 5%;
  margin: 0 auto;
  position: relative;
  background-color: #313139;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div className="loading">
  <div className="loading-data">
    <div className="container-fluid">
      <div className="row align-items-center">
        <div className="name">Names</div>
      </div>
      <div className="row align-items-end">
        <div className="copyright">Droits</div>
        <div className="links">links</div>
      </div>
    </div>
  </div>
</div>

当前结果：

我想要什么：

Answer 1

您在找这样的东西吗？

<div className="loading">
        <div className="loading-data">
         <div></div>
          <div className="row align-items-center">
            <div className="name">Names</div>
          </div>
          <div className="container-fluid">
            <div className="row align-items-end">
              <div className="copyright">Droits</div>
              <div className="links">links</div>
            </div>
          </div>
        </div>
      </div>

css

body {
  background-color: rgb(29, 32, 39);
  color: red;
  font-weight: 700;
}
.loading-data {
  border-radius: 10px;
  margin: 0 auto;
  position: relative;
  height: 100vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
}
.container-fluid {
  width: 100%;
}
.align-items-end {
  display: flex;
  justify-content: space-between;
}

工作示例Demo