如何在中等及以上尺寸设备实现右对齐占半屏的Bootstrap模态框

替换CSS代码 #

你需要把原有CSS中#modal-nav相关的硬编码样式替换为以下内容，保留.icon-button的原有样式即可：

.icon-button {
  height: 40px;
  width: 40px;
  border-radius: 40px;
  background-color: transparent;
  border-color: black;
}

/* 重置模态框容器默认样式，消除框架默认边距限制 */
.modal.bd-example-modal-lg .modal-dialog {
  margin: 0;
  max-width: 100%;
  height: 100vh;
}

/* 中等以下尺寸设备默认全屏样式 */
#modal-nav {
  height: 100vh;
  width: 100vw;
  border: none;
  border-radius: 0;
}

/* 中等及以上尺寸设备（≥768px，对应Bootstrap md断点）样式 */
@media (min-width: 768px) {
  .modal.bd-example-modal-lg .modal-dialog {
    margin-left: auto; /* 实现模态框靠右固定 */
  }
  #modal-nav {
    width: 50vw;
  }
}

样式说明 #

• 移除了原有#modal-nav中硬编码的left、top、固定宽高等不符合响应式要求的属性
• 以Bootstrap4默认的中等断点768px为分界做响应式适配
• 重置了Bootstrap模态框默认的最大宽度限制和外边距，避免样式被框架默认规则覆盖

内容的提问来源于stack exchange，提问作者Juan C