css - 使用 Bootstrap Modal 4.3 垂直对齐中心
问题描述
我试图在我的模态中心垂直对齐身体,但什么也没有发生。怎么了?我使用4.3 版的 bootstrap .!
<section>
<div id="search-shopkeeper-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="shopkeeperModal" aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<div class="modal-header border-0 p-0 m-0">
<div class="container-fluid p-2">
<form action="">
<div class="form-row">
<div class="col-12">
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span id="search-shopkeeper-addon" class="input-group-text bg-transparent border-0"><i class="fas fa-search"></i></span>
</div>
<input type="text" class="form-control rounded-0 border-0 shadow-none" placeholder="Digite o nome do Lojista..." aria-label="Username" aria-describedby="search-shopkeeper-addon">
</div>
</div>
</div>
</form>
</div>
</div>
<div class="modal-body" style="border: 1px red solid">
<!-- @todo -->
<div class="container d-flex align-items-center" style="border: 1px red solid">
<div><h1 class="text-center">SEM RESULTADOS!</h1></div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default text-white shadow-none" data-dismiss="modal" style="background-color: #333333 !important">Fechar</button>
</div>
</div>
</div>
</div>
</section>
解决方案
您要添加以下规则:
.modal-body {
display: flex;
align-items: center;
justify-content: center;
}
这可以在下面看到:
.modal-content {
height: 500px; /* Needed for this example to demonstrate the change */
}
.modal-body {
display: flex;
align-items: center;
justify-content: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<section>
<div id="search-shopkeeper-modal" class="" tabindex="-1" role="dialog" aria-labelledby="shopkeeperModal" aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<div class="modal-header border-0 p-0 m-0">
<div class="container-fluid p-2">
<form action="">
<div class="form-row">
<div class="col-12">
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span id="search-shopkeeper-addon" class="input-group-text bg-transparent border-0"><i class="fas fa-search"></i></span>
</div>
<input type="text" class="form-control rounded-0 border-0 shadow-none" placeholder="Digite o nome do Lojista..." aria-label="Username" aria-describedby="search-shopkeeper-addon">
</div>
</div>
</div>
</form>
</div>
</div>
<div class="modal-body" style="border: 1px red solid">
<!-- @todo -->
<div class="container d-flex align-items-center" style="border: 1px red solid">
<div>
<h1 class="text-center">SEM RESULTADOS!</h1>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default text-white shadow-none" data-dismiss="modal" style="background-color: #333333 !important">Fechar</button>
</div>
</div>
</div>
</div>
</section>
推荐阅读
- spring-boot - 如何解决 Spring Boot 与 Websphere 传统 8.5.5 jaxb 冲突问题?
- c# - SQLCipher 集成到 Xamarin.Forms;SQLite 库不支持加密异常
- azure-devops - 如何在 azure 管道版本中检查已发布管道工件的可用性
- shadow-dom - shadowRoot 自定义元素不呈现内容
- r - 动态 pivot_longer 和 facet wrap ggplot
- c++ - 为什么即使我没有在此代码中进行转换?
- aws-glue - aws-glue Python shell 脚本无法连接到 pypi.org
- excel - 如何将可选值传递给子?
- python - 如何根据我在 SQL 中已有的值在 html 中选择一个选项?
- python - 在 CPanel 中使用 Python 在 Django 管理面板中加载静态文件