1. 效果一 HTML <a href="#" class="btn btn-default" data-toggle="modal" data-target="#videoModal"…
May 15, 2018
Bootstrap: 如何修改Modal长度,Modal如何居中, How to increase Bootstrap Modal Width and be Centered?

上图有错误修改的结果, 解决方案如下:
HTML:
<a href="#shipping_calculator" title="" data-toggle="modal">TEST</a> <div id="shipping_calculator" class="modal fade" tabindex="-1"> <div class="vertical-alignment-helper"> <div class="modal-dialog vertical-align-center"> <div class="modal-content"> <div class="modal-header no-padding"> <div class="table-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> <span class="white">×</span> </button> <i class="fa fa-calculator"></i> Rate Calculator </div> </div> <div class="modal-body"> <div class="input-group"> <input type="text" id="spinner1" class="spinbox-input form-control text-center"> <div class="spinbox-buttons input-group-btn btn-group-vertical"> <button type="button" class="btn spinbox-up btn-sm btn-info"> <i class="icon-only ace-icon fa fa-chevron-up"></i> </button> <button type="button" class="btn spinbox-down btn-sm btn-info"> <i class="icon-only ace-icon fa fa-chevron-down"></i> </button> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-sm btn-success"> Get Rates! <i class="ace-icon fa fa-arrow-right icon-on-right bigger-110"></i> </button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div> </div>
CSS:
.vertical-alignment-helper { display:table; height: 100%; width: 100%; pointer-events:none; } .vertical-align-center { /* To center vertically */ display: table-cell; vertical-align: middle; pointer-events:none; width: 800px; margin: auto; } .modal-content { /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */ width:inherit; max-width:inherit; /* For Bootstrap 4 - to avoid the modal window stretching full width */ height:inherit; /* To center horizontally */ margin: 0 auto; pointer-events:all; }
关键点:
- 添加 css class vertical-alignment-helper 和 vertical-align-center ,用来控制水平和垂直居中
- vertical-align-center 添加 width: 800px; margin: auto; 用来控制窗口宽度和保持居中
本文:Bootstrap: 如何修改Modal长度,Modal如何居中, How to increase Bootstrap Modal Width and be Centered?