ng bootstrap datepicker样式泄漏

Question

我遇到的问题是我的ng-bootstrap datepicker的样式不正确。请看下图：

看起来每个class="ngb-dp-day"的右侧都有一个较大的边距，其结果大小不正确，因此每列天数垂直叠加在一起。< / p>

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

三种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

有点难以将问题与此问题隔离开来，我会说每天将div元素包裹在设置为display: block的元素中，这就是造成垂直堆叠的原因。

你可以尝试任何一种方法：

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

或者

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