ng-bootstrap datepicker CSS问题：日期选择器模态框过小如何恢复默认尺寸？

嘿，我碰到过好几次这种情况，你没改自定义CSS但模态框尺寸不对，大概率是样式导入或者全局样式冲突搞的鬼，试试下面几个解决方案：

一、先确认Bootstrap CSS的导入是否正确 #

ng-bootstrap完全依赖Bootstrap的基础样式，如果没正确引入，模态框的默认尺寸就会失效。

• 如果你用Angular CLI开发，打开angular.json，检查styles数组里有没有加Bootstrap的CSS：

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
]

• 要是习惯用CSS导入，就在src/styles.css里加这行：

@import "~bootstrap/dist/css/bootstrap.min.css";

另外别忘了确认Bootstrap和ng-bootstrap的版本匹配——比如ng-bootstrap 15+需要搭配Bootstrap 5.x，版本不兼容也会出样式问题。

二、排查全局样式有没有冲突 #

有时候项目里的全局样式会不小心覆盖Bootstrap的默认模态框样式，去你的styles.css或者其他全局样式文件里搜搜看，有没有类似这样的代码：

.modal {
  max-width: 400px !important;
  width: 60% !important;
}

如果有，先把这些代码注释掉试试，大概率就是它们把模态框尺寸改小了。

三、强制恢复默认样式（实在不行的话） #

要是上面两步都没解决，那就直接在组件的CSS文件里加一段样式，强制恢复ng-bootstrap日期选择器模态框的默认尺寸：

::ng-deep .ngb-datetime-modal {
  max-width: none !important;
  width: auto !important;
}

::ng-deep .modal-dialog {
  max-width: 900px; /* 这是Bootstrap默认的模态框最大宽度，你也可以根据需求调整 */
  margin: 1.75rem auto;
}

这里用::ng-deep是为了穿透Angular的组件样式隔离，临时解决冲突很管用，不用太担心，只是别滥用就行。

四、检查ng-bootstrap版本兼容性 #

最后再确认下你的ng-bootstrap版本和Angular版本是否匹配，比如：

• Angular 16 ↔ ng-bootstrap 15.x
• Angular 15 ↔ ng-bootstrap 14.x
  版本不匹配的话，不仅样式会出问题，功能也可能有bug，确认好对应关系后，必要的话更新到匹配的版本。

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