我正在嘗試為用戶提交表單時(shí)創(chuàng)建一個(gè)加載動(dòng)畫，然后通知他們是否成功或是否有錯(cuò)誤。我的問(wèn)題是加載圖標(biāo)和文本沒有與其所在的 div 中心垂直對(duì)齊（col）。我希望將其放在中間，以便我可以在一段時(shí)間后用表單提交的響應(yīng)替換列內(nèi)容（加載圖標(biāo)和文本）。我正在使用 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);}片段：
1 回答
守候你守候我
TA貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超10個(gè)贊
更新您的代碼，如下所示：
.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>
- 1 回答
- 0 關(guān)注
- 125 瀏覽
添加回答
舉報(bào)
0/150
提交
取消