html - 列内容垂直对齐 - Bootstrap 4
问题描述
我正在尝试在用户提交表单之前创建加载动画,然后通知他们它是否成功或是否有错误。我的问题是加载图标和文本没有垂直对齐它所在的 div 的中心(col)。我希望将它放在中心,以便我可以在一段时间后用表单提交的响应替换列内容(加载图标和文本)。我正在使用 Bootstrap 4,并且尝试了各种不同的代码,例如列上的align-items-center
和my-auto
无济于事。
<div class="container-fluid h-100 w-100 formSubmitLoad d-flex flex-column" id="loader">
<div class="row justify-content-center align-items-center h-100" id="loadingIcon">
<div class="col-11 col-md-6 text-center bg-primary h-75">
<i class="fas fa-spinner fa-pulse fa-4x"></i>
<h2 class="pt-4">Loading</h2>
</div>
<div class="col-11 col-md-6 text-center bg-primary h-75 d-none">
<!-- Column content to replace above column-->
</div>
</div>
</div>
.formSubmitLoad {
position: fixed;
z-index: 1;
left: 0;
top: 0;
overflow: auto;
color: white;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.9);
}
解决方案
更新您的代码,如下所示:
.formSubmitLoad {
color: white;
background-color: rgba(0, 0, 0, 0.9);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" >
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">
<div class="container-fluid h-100 w-100 formSubmitLoad position-fixed" id="loader">
<div class="row h-100" id="loadingIcon">
<div class="m-auto col-11 col-md-6 d-flex flex-column justify-content-center align-items-center bg-primary h-75">
<i class="fas fa-spinner fa-pulse fa-4x"></i>
<h2 class="pt-4">Loading</h2>
</div>
<div class="m-auto col-11 col-md-6 text-center bg-primary h-75 d-none">
<!-- Column content to replace above column-->
</div>
</div>
</div>
推荐阅读
- android - 意图不使用片段与伴随对象一起工作
- python - 两台服务器之间的 Mongo DB 通信问题
- json - python3中这个Curl命令的等价物是什么?
- asp.net - Asp.Net Core 重定向到另一个页面
- css - 在表格数据中,以斜体而不是常规方式显示文本。无法理解为什么会这样
- javascript - 查找表中与特定数字最接近的数字
- laravel - 我想在 laravel 8 Elequent 查询中获取 date(groupBy) 明智的总出席、总休假和总缺勤,并在刀片模板中显示
- anylogic - Anylogic - 记录资源池活动
- java - 带有 KeyStore 和 ServerSockets 的 Java SSL/TLS
- python - 使用最新文件中缺少的项目创建一个 csv