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;
}

关键点：

1.  添加 css class vertical-alignment-helper  和 vertical-align-center ，用来控制水平和垂直居中
2.  vertical-align-center 添加 width: 800px; margin: auto; 用来控制窗口宽度和保持居中

本文：Bootstrap: 如何修改Modal长度，Modal如何居中, How to increase Bootstrap Modal Width and be Centered?