如何实现相对于第二列的Bootstrap Modal（桌面尺寸不越界）

默认Bootstrap Modal是固定定位（fixed），会脱离文档流，哪怕你把它放在设了相对定位的第二列里，它也不受该列边界限制。要实现你要的效果，得调整Modal的定位规则，让它的上下文绑定到第二列上，具体修改如下：

关键样式调整 #

.col{
  height:100vh;
}

.column-two{
  position:relative;
  /* 限制列内绝对定位元素不超出列范围 */
  overflow: hidden;
}

/* 重置Modal默认固定定位，让它跟随父级上下文 */
.modal {
  position: static !important;
}

/* 让Modal对话框相对于第二列绝对定位并居中 */
.modal-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0; /* 去掉默认margin避免冲突 */
}

.modal-content {
  width: 200px;  
  height: 228px;
}

修改后的完整HTML代码 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"
        rel="stylesheet"
        integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"
        crossorigin="anonymous" />


<div class="row align-items-start">
    <div class="col border">
      ONE
    </div>
    <div class="col border column-two">
      TWO
      <!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

      <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
    </div>
    <div class="col border" >
     THREE
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.6.1.js"
          integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI="
          crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
          integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
          crossorigin="anonymous"></script>

核心逻辑说明 #

• 将.modal定位改为static，解除默认的fixed定位，让它回归第二列的文档流，继承父级.column-two的相对定位上下文。
• .modal-dialog设为绝对定位，通过top:50%+left:50%+transform:translate(-50%,-50%)实现第二列内的居中显示，同时去掉默认margin:auto避免布局冲突。
• 给.column-two加overflow:hidden，确保Modal尺寸超过列宽高时，不会超出列的边界。

调整后，在桌面尺寸范围内拖动窗口调整大小时，Modal会始终被限制在第二列范围内，不会越界。

内容的提问来源于stack exchange，提问作者Mark Heller