css - 模态外的引导模态正文内容
问题描述
我在树枝模板上有这个引导模式:
{# empty Twig template #}
<div class="modal fade" tabindex="-1" role="dialog" id="clientsModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Seleccionar fechas</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="col-md-6">
<label for="from">Desde</label>
<input class="form-control datepicker" type="text" id="from">
</div>
<div class="col-md-6">
<label for="until">Hasta</label>
<input class="form-control datepicker" type="text" id="until">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="clients-report-search">Buscar</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
标签和输入在modal-body
div 内部,但显示在
div外部
标签显示在模态页脚而不是正文内
解决方案
你只需要在row
之后添加modal-body
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#clientsModal">Open Modal</button>
<div class="modal fade" tabindex="-1" role="dialog" id="clientsModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Seleccionar fechas</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<label for="from">Desde</label>
<input class="form-control datepicker" type="text" id="from">
</div>
<div class="col-md-6">
<label for="until">Hasta</label>
<input class="form-control datepicker" type="text" id="until">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="clients-report-search">Buscar</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
推荐阅读
- spring-boot - 关于将 Clojure 集成到 springboot 框架中
- c++ - 标识符“operator + =”未定义
- java - 正则表达式匹配一个字符串,如果它只匹配 Java 中的一个组
- javascript - 我如何将 CSS 属性作为 Javascript 赋予克隆元素?
- amazon-web-services - 在分布式 WebApp 中的哪里存储初始化属性?
- gulp - “ events.js:174 throw er; // Unhandled 'error' event” gulp 错误消息的原因是什么?
- mysql - 表列有值,但执行 SELECT * FROM t_order 后,一些返回结果为空
- javascript - 为什么 onsubmit 事件有效但 addEventListener 无效?
- javascript - 了解方案中的折叠和减少功能
- c++ - 如何使用 mpi scatter 修复“矢量下标超出范围”?