ng bootstrap datepicker样式泄漏

Question

我遇到了我的ng-bootstrap datepicker样式错误的问题。 请看下图：

似乎在每个class="ngb-dp-day"的右侧应用了较大的边距，导致结果大小不正确，因此，每一天的天数垂直堆叠在一起。

我浏览了元素树，似乎找不到任何可能从其他元素接收样式泄漏的类。

任何三个ViewEncapsulation方法（ None ， Native或Emulated ）有所作为无论是。 同样的垂直堆叠。

我正在ng-bootstrap模态主体内部渲染datepicker。 下方的html：

<ng-template #content let-c="close" let-d="dismiss">
  <div class="modal-header">
    ...
  </div>
  <div class="modal-body">
    <ngb-datepicker #dp [(ngModel)]="model.dateStruct" (navigate)="date = $event.next"></ngb-datepicker>
  </div>
  <div class="modal-footer">
    ...
  </div>
</ng-template>

我还能提供更多信息吗？

Answer 1

Kinda仅凭这一点很难解决问题，我想说的是，将每天包装在设置为display: block的div元素中，这就是导致垂直堆叠的原因。

您可以尝试以下两种方法：

• 将.ngb-dp-day的父容器设置为display: flex; ＆ flex-flow: row wrap;

要么

• 将div.ngb-dp-day为display: inline-block; 或float: left;