我尝试了以下方法:

   <div class="modal hide fade modal-admin" id="testModal" style="display: none;">
        <div class="modal-header">
          <a data-dismiss="modal" class="close">×</a>
          <h3 id='dialog-heading'></h3>
        </div>
        <div class="modal-body">
            <div id="dialog-data"></div>
        </div>
        <div class="modal-footer">
          <a data-dismiss="modal" class="btn" >Close</a>
          <a class="btn btn-primary" id="btnSaveChanges">Save changes</a>
        </div>
    </div>

这段Javascript:

    $('.modal-admin').css('width', '750px');
    $('.modal-admin').css('margin', '100px auto 100px auto');
    $('.modal-admin').modal('show')

结果不是我预料的那样。模态的左上角位于屏幕的中心。

有人能帮帮我吗?有人试过吗?我想这是一件很平常的事。


当前回答

保留响应式设计,将宽度设置为您想要的。

.modal-content {
  margin-left: auto;
  margin-right: auto;
  max-width: 360px;
}

保持简单。

其他回答

基于较少的解决方案(无js) Bootstrap 2:

.modal-width(@modalWidth) {
    width: @modalWidth;
    margin-left: -@modalWidth/2;

    @media (max-width: @modalWidth) {
        position: fixed;
        top:   20px;
        left:  20px;
        right: 20px;
        width: auto;
        margin: 0;
        &.fade  { top: -100px; }
        &.fade.in { top: 20px; }
    }
}

然后无论你想指定一个模态宽度:

#myModal {
    .modal-width(700px);
}

与其使用百分比来使模式响应,我发现可以通过使用已经内置到bootstrap中的列和其他响应元素来获得更多的控制。


要使模态响应/任意数量的列的大小: 1)在模态对话框div周围添加一个额外的div,类为.container -

<div class="container">
    <div class="modal-dialog">
    </div>
</div>

2)添加一点CSS,使模式全宽

.modal-dialog {
    width: 100% }

3)如果你有其他情态动词,可以选择增加一个额外的类-

<div class="container">
    <div class="modal-dialog modal-responsive">
    </div>
</div>

.modal-responsive.modal-dialog {
    width: 100% }

4)添加在一行/列,如果你想要各种大小的情态动词-

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="modal-dialog modal-responsive">
       ...
      </div>
    </div>
  </div>
</div>

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

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

我为Bootstrap 4.1解决了这个问题

混合之前发布的解决方案

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

在Bootstrap 3+中,改变模态对话框大小最合适的方法是使用size属性。下面是一个例子,注意modal-dialog类中的modal-sm,表示一个小的模态。它可以包含值sm表示小,md表示中,lg表示大。

<div class="modal fade" id="ww_vergeten" tabindex="-1" role="dialog" aria-labelledby="modal_title" aria-hidden="true">
  <div class="modal-dialog modal-sm"> <!-- property to determine size -->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="modal_title">Some modal</h4>
      </div>
      <div class="modal-body">

        <!-- modal content -->

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="some_button" data-loading-text="Loading...">Send</button>
      </div>
    </div>
  </div>
</div>