Html 如何仅在移动屏幕的底部创建两个固定的水平对齐按钮？

如何仅借助css或bootstrap在移动屏幕的底部创建两个固定的水平对齐按钮？我试过了，但没有达到预期效果

<style>
.mobileShow{
    display: none;
    z-index: 999;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
.mobileShow {
    display: block;
    width: 50%;
    position: fixed;
    bottom: 0;
    left: 50%;
  }
}
</style>

<div class="mobileShow">
  <div class="d-flex justify-content-between">
    <button class='btn btn-lg btn-success btn-block'>Login</button>
    <button class='btn btn-lg btn-primary btn-block'>Register</button>
</div>

.mobileShow{
显示：无；
z指数：999；
}
@仅介质屏幕和（最小设备宽度：320px）和（最大设备宽度：480px）{
.mobileShow{
显示：块；
宽度：50%；
位置：固定；
底部：0；
左：50%；
}
}
登录
登记

您可能希望使用

max width

而不是

max device width

。 此外，底部缺少一个Closing

Html:

---

我在这里为您创建了一个工作示例：

它以什么方式不能按预期工作？猜猜看，你可能会惊讶于今天手机屏幕的密度。我希望它能在所有类型的手机上正常工作。@Yash我现在编辑了样式，只需使用

display:block而不是
显示：flex：）
<div class="mobileShow">
  <div class="d-flex justify-content-between">
    <button class='btn btn-lg btn-success btn-block'>Login</button>
    <button class='btn btn-lg btn-primary btn-block'>Register</button>
  </div>
</div>

.mobileShow{
    display: none;
    z-index: 999;
}

.mobileShow .btn.btn-block {
  margin-top: 0;
}

@media only screen and (max-width: 767px) {
  .mobileShow {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
  }
}