Bootstrap 3 模态框自定义宽度后 无法水平居中

如果您在 Bootstrap 3 模态框中自定义了宽度，但是发现无法水平居中，您可以尝试以下解决方法：

1. 将模态框的左右 margin 设置为 auto：

.modal-dialog {
  margin: 0 auto;
}

2. 将模态框的 display 属性设置为 flex，并添加 justify-content 属性：

.modal-dialog {
  display: flex;
  justify-content: center;
}

这将使用 flexbox 将模态框水平居中。

3. 如果以上两种方法都没有解决问题，您可以尝试使用 JavaScript 动态计算模态框的 left 和 top 值，以实现水平居中。例如：

$(document).ready(function(){
  $('#myModal').on('show.bs.modal', function (e) {
    var modalWidth = $(this).find('.modal-dialog').width();
    $(this).find('.modal-dialog').css({
      'margin-left': function () {
        return -($(this).width() / 2);
      }
    });
  });
});

这将在模态框显示时动态计算其宽度并将其居中。请注意，这需要 jQuery 库的支持。

相关问题

Bootstrap 3 模态框chosen

如果您想在 Bootstrap 3 模态框中使用 Chosen 插件，可以按照以下步骤进行操作：

1. 首先，确保您已经引入了 Bootstrap 和 Chosen 插件的相关文件。

2. 在模态框的 HTML 代码中，添加一个 select 元素，并为其添加一个唯一的 ID。例如：

<div class="modal-body">
  <select id="my-select" class="chosen-select">
    <option value="1">选项1</option>
    <option value="2">选项2</option>
    <option value="3">选项3</option>
  </select>
</div>

3. 在模态框显示之后，初始化 Chosen 插件。例如：

$('#myModal').on('shown.bs.modal', function () {
  $('.chosen-select', this).chosen();
});

其中，#myModal 是您的模态框的 ID。

这样，您就可以在 Bootstrap 3 模态框中使用 Chosen 插件了。

bootstrap3模态框全屏

要实现Bootstrap 3模态框全屏，可以按照以下步骤进行操作：

1. 首先，在模态框中添加自定义CSS类名，例如“full-screen-modal”：

<div class="modal fade full-screen-modal" id="myModal" tabindex="-1" role="dialog">
   <div class="modal-dialog" role="document">
      <div class="modal-content">
         <div class="modal-header">
            <h5 class="modal-title">Modal Title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">&times;</span>
            </button>
         </div>
         <div class="modal-body">
            <p>Modal Content</p>
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
         </div>
      </div>
   </div>
</div>

2. 然后，在全局CSS文件中添加以下代码：

.full-screen-modal .modal-dialog {
   margin: 0;
   max-width: 100%;
   height: 100%;
   padding: 0;
}

.full-screen-modal .modal-content {
   height: 100%;
   border-radius: 0;
}

这样就可以将模态框全屏显示了。注意，由于全屏模态框会覆盖整个页面，因此建议在模态框中添加关闭按钮，以便用户可以随时关闭模态框。