ng bootstrap 日期选择器样式泄漏

Question

我遇到一个问题，我的 ng-bootstrap datepicker 样式设置不正确。请看下图：

看起来每个 class="ngb-dp-day" 的右侧都应用了很大的边距，结果大小不正确，因此每一列天数都垂直堆叠在一起.

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

三种 ViewEncapsulation 方法（None、Native 或 Emulated）中的任何一种都会有所不同。相同的垂直堆叠。

我正在 ng-bootstrap 模态主体内渲染日期选择器。 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

很难用这个来隔离问题，我会说每天都在一个设置为 display: block 的 div 元素中包装，这就是导致垂直堆叠的原因。

您可以尝试以下任一方法：

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

或

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

ng bootstrap 日期选择器样式泄漏

ng bootstrap datepicker style leak

css

ng-bootstrap

angular