Bootstrap 3 弹窗modal-lg后无法水平居中

如果你在使用 Bootstrap 3 的 modal-lg 弹窗时出现了无法水平居中的问题，可以尝试以下几种解决方法：

1. 添加样式类

可以在 modal 对话框上添加 .modal-dialog-centered 类，这样就可以实现水平居中了。示例代码如下：

<div class="modal-dialog modal-lg modal-dialog-centered">
  <!-- modal 内容 -->
</div>

2. 自定义样式

如果仍然无法水平居中，可以尝试通过自定义样式来解决。首先，你需要设置 modal 的 left 和 margin-left 属性为 0，然后设置 transform 属性为 translateX(50%)，示例代码如下：

.modal-lg {
  max-width: 90%;
}
.modal-lg .modal-dialog {
  margin: 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

这样 modal 对话框就会水平居中了。注意，这种方法需要根据具体情况进行微调，以达到最佳效果。

希望这些方法能够帮助你解决问题。

相关问题

bootstrap的弹窗剧中_bootstrap弹窗居中处理

要使Bootstrap弹窗居中，可以使用以下步骤：

1. 将弹窗的外层div设置为fixed定位，并将其宽度和高度设置为100%。

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <!-- 弹窗内容 -->
    </div>
  </div>
</div>

2. 将弹窗的内部div设置为absolute定位，并将其left和top属性设置为50%，以使其水平和垂直居中。

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
}

.modal-dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

3. 对于较小的弹窗，可以添加一个`modal-sm`类来使其更紧凑。

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog modal-dialog-centered modal-sm">
    <div class="modal-content">
      <!-- 弹窗内容 -->
    </div>
  </div>
</div>

bootstrap 3 弹窗宽度

Bootstrap 3 弹窗的宽度可以通过设置模态框的class为`modal-lg`或`modal-sm`来控制。`modal-lg`表示弹窗比默认宽度更大，`modal-sm`表示弹窗比默认宽度更小。

例如，以下代码可以创建一个宽度为大的弹窗：

<div class="modal modal-lg" 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 goes here...</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>

你也可以通过自定义CSS来设置弹窗的宽度，例如：

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

这将把弹窗的最大宽度设置为800像素。