供参考，Bootstrap 3自动处理左侧属性。所以简单地添加这个CSS将改变宽度并保持居中:

.modal .modal-dialog { width: 800px; }

如果你想让它只响应CSS，使用这个:

.modal.large {
    width: 80%; /* respsonsive width */
    margin-left:-40%; /* width/2) */ 
}

注1:我使用了一个.large类，你也可以在正常的.modal上这样做

注2:在Bootstrap 3中，左边的负边距可能不再需要了(未经个人确认)

/*Bootstrap 3*/
.modal.large {
     width: 80%;
}

注3:在Bootstrap 3和4中，有一个modal-lg类。所以这可能是足够的，但如果你想让它响应，你仍然需要我为Bootstrap 3提供的修复。

在一些应用程序中使用固定模式，在这种情况下，你可以尝试width:80%;左:10%;(公式:left = 100 - width / 2)

you can use any prefix or postfix name for modal. but you need to make sure that's should use everywhere with same prefix/postfix name.    

body .modal-nk {
        /* new custom width */
        width: 560px;
        /* must be half of the width, minus scrollbar on the left (30px) */
        margin-left: -280px;
    }

or

body .nk-modal {
            /* new custom width */
            width: 560px;
            /* must be half of the width, minus scrollbar on the left (30px) */
            margin-left: -280px;
        }

尝试以下内容(参见jsfiddle示例:http://jsfiddle.net/periklis/hEThw/1/)

<a class="btn" onclick = "$('#myModal').modal('show');$('#myModal').css('width', '100px').css('margin-left','auto').css('margin-right','auto');" ref="#myModal" >Launch Modal</a>
<div class="modal" id="myModal" style = "display:none">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>​

我为Bootstrap 4.1解决了这个问题

混合之前发布的解决方案

.modal-lg { Max-width: 90% !/*所需的相对宽度*/ margin-left:汽车!重要; margin-right:汽车!重要; ｝

引导3:为了保持小型和超小型设备的响应功能，我做了以下工作:

@media (min-width: 768px) {
.modal-dialog-wide
{ width: 750px;/* your width */ }
}