如何自定义ngx bootstrap模态框宽度？含按钮边距设置需求

嘿，我懂这种被默认样式卡壳的感觉！ngx-bootstrap的模态框确实自带一些固定样式，但只要用对CSS选择器，完全能改成你想要的样子。下面分两步帮你搞定：

一、修改模态框宽度 #

ngx-bootstrap的模态框核心容器是.modal-dialog，默认有固定的max-width限制。我们可以通过自定义类+更具体的CSS选择器来覆盖它，这样不会影响其他模态框：

1. 给模态框添加自定义类（如果是模板里写的模态框）：

<bs-modal class="custom-modal">
  <!-- 模态框头部、内容、底部 -->
</bs-modal>

如果是用BsModalService动态创建的模态框，在配置里指定类：

this.modalService.show(YourModalComponent, { class: 'custom-modal' });

2. 添加CSS样式（推荐放在全局样式文件styles.css，或者在组件内用::ng-deep突破组件样式隔离）：

/* 全局样式写法 */
.custom-modal .modal-dialog {
  /* 固定宽度，比如设置成你需要的数值 */
  width: 800px;
  /* 或者用响应式的最大宽度，适配不同屏幕 */
  max-width: 95%;
}

/* 组件内样式写法（需要加::ng-deep） */
::ng-deep .custom-modal .modal-dialog {
  max-width: 95%;
}

二、设置按钮与模态框边缘的5px边距 #

模态框的底部按钮容器是.modal-footer，默认有padding: 1rem的内边距，我们只需要修改这个内边距，再调整按钮的间距即可：

1. 给模态框的footer添加样式：

.custom-modal .modal-footer {
  /* 把footer的内边距改成5px，让按钮贴近边缘 */
  padding: 5px;
  /* 如果默认的顶部间距不需要，可以去掉 */
  margin-top: 0;
}

2. （可选）调整按钮之间的间距：
   如果想让按钮之间也保留5px间距，给按钮加个margin：

.custom-modal .modal-footer .btn {
  margin: 0 5px;
}

这样设置后，你的模态框宽度就能自由调整，按钮也会和边缘保持5px的距离啦～

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