Question

我在ngBootstrap上遇到了问题，即它无法使我的应用程序完全响应，并且我不确定是否做错了什么，或者库。

好的，这是我的应用程序中行为不正确的部分的屏幕截图：

全屏尺寸，效果很好：

使窗口变小时，它也可以正常工作，直到达到此大小为止：

但是，如果窗口变得小于该点，那三张卡片就停止调整大小。您可以看到以下组件的尺寸调整得更好，尽管它也失去了右边距：

我的父模板如下：

    <div class="margin content-margin" *ngIf="config"  >
  <div class="row">
    <p class="title">{{ title?.toUpperCase() }}</p>
    <ng-template #tipContent>
      <div class="tooltip-inner ">{{description}}</div>
    </ng-template>
    <i class="fa fa-info-circle bootstrap-tooltip tooltip-text tooltip-relocate selected-color" placement="right" [ngbTooltip]="tipContent"  aria-hidden="true"></i>
  </div>
    <div class="row">
      <div class="breadc">
        <breadcrumb [locations]="getBreadcrumb()"></breadcrumb>
      </div>
      <div class="filters-reset" (click)="resetFilters()">
        <i class="fa fa-undo" aria-hidden="true"></i>
        Reset filters
      </div>
    </div>
    <div class="row row-separator">
      <card [title]="'DIMENSIONS'"  class="col col-sm-4" [enabled]="usesSegments ? 'true' : false" (cardOpen)="config?.cardStatus['segments'] = $event">
        <div class="margin">
          <segments [config]="config" [segmentsEnabled]="usesSegments" [cardOpen]="config?.cardStatus['segments']"></segments>
        </div>
    </card>
    <card [title]="'CHANNEL'"  class="col col-sm-4" (cardOpen)="config?.cardStatus['levelselect'] = $event">
      <levels-selector class="levels-wrapper" [config]="config" [cardOpen]="config?.cardStatus['levelselect']"></levels-selector>
    </card>
    <card [title]="'PERIOD'" class="col col-sm-4" (cardOpen)="config?.cardStatus['period_picker'] = $event">
      <period-picker-component class="period-picker"
        [cardOpen]="config?.cardStatus['period_picker']"
        [config]="config"
      >
      </period-picker-component>
    </card>
  </div>
    <div class="row row-separator" >
      <chart-card [title]="'CONVERSIONS GRAPH'" class="col" [config]="config" (cardOpen)="config?.cardStatus['chart'] = $event">
        <simple-chart-wrapper
            [chartOptions]="chartOptions"
            [config]="config"
            [cardOpen]="config?.cardStatus['chart']">
        </simple-chart-wrapper>
      </chart-card>
    </div>
    <div class="row row-separator">
        <table-card [title]="config?.data?.metric?.label + ' - '+ (config?.data?.filters?.period?.range)"
                    [downloadable]="true"
                    [tableController]="table"
                    class="col">
            <basic-table [config]="config" [table]="table"></basic-table>
        </table-card>
      </div>
</div>

您看到应用于某些这些标签的某些类名实际上未被使用。如果要查看正在应用的CSS类，请在此处转储此处适用的CSS：

.container{
    background-color: #dee3ea !important;
    min-width: 1px;
    min-height: 1px;
    width:100%;
    height: 100%;
}

.title{
    margin-left: 15px;
}

.row-separator{
    margin-top: 2%;
}

.filters-reset{
    color: orange;
    position: absolute;
    right: 2%;
    cursor: pointer;
}

.tooltip-text{
    font-size: 20px !important;
}

.breadc{
    position: absolute;
    left: 0px !important;
}


.content-margin{
    position:relative;
    margin-top: 55px;
}

我尝试了很多事情，例如使用更具体的类（例如col-sm的类），但似乎没有任何效果。这些卡的大小不会超出该点。

有人知道我在这里做错了吗？

编辑：

依赖版本：

“ bootstrap”：“ ^ 4.0.0-alpha.6”

“ @ ng-bootstrap / ng-bootstrap”：“ ^ 1.1.2”

Angular Bootstrap无法完全响应

0 个答案: