如何更改 Twitter Bootstrap 模式框的默认宽度？

javascript jquery twitter-bootstrap-2

2022-08-29 23:38:30

我尝试了以下方法：

   <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')

结果不是我所期望的。模式左上角位于屏幕中心。

任何人都可以帮助我。有没有人尝试过这个。我认为这不是一件不寻常的事情。

答案 1

更新：

在您需要更改模式对话框。因此，在本例中，您可以在站立的位置添加类。bootstrap 3modal-adminmodal-dialog

原始答案（Bootstrap < 3）

你试图用JS /jQuery改变它有某种原因吗？

您只需使用CSS即可轻松完成此操作，这意味着您不必在文档中进行样式设置。在您自己的自定义 CSS 文件中，添加：

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

在您的情况下：

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

我将 body 放在选择器之前的原因是，它的优先级高于默认值。通过这种方式，您可以将其添加到自定义CSS文件中，并且无需担心更新Bootstrap。

答案 2

如果你想让它只用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 中，有一个模态 lg 类。所以这可能就足够了，但是如果你想让它响应，你仍然需要我为Bootstrap 3提供的修复程序。

在某些应用程序中使用模态，在这种情况下，您可以尝试（公式：left = 100 - 宽度 / 2）fixedwidth:80%; left:10%;