ngx-bootstrap 制表符中断 bootstrap table 响应

Question

我正在使用调用各种 Angular 4 组件的 ngx 标签集，这些组件使用 Bootstrap 3.3.7 组件。在其中一个选项卡中，我显示了一个非常基本的 Bootstrap table。出于某种原因，我在选项卡中失去了 table 响应能力 -- table 只是拼凑在一起，使字段几乎无法使用。应用程序中的其他 tables（未封装在 ngx 组件中）工作正常。为了让事情变得更有趣，我在不同的选项卡中有一个相当复杂的表单，可以按预期响应。

目前，该应用程序将使用此库 b/c 它与 AoT 配合良好，因此目前我们只能使用它。

除了调整 cols 之外，我还尝试了一些不同的 hack，这些 hack 对我运行去年在 Angular 4 中遇到的其他问题有效。就像利用 Angular 内置的影子 dom 功能（视图封装）一样，但没有用。我也试过更新 ngx，甚至尝试将 Angular 4.6 迁移到 5.2..这也没有效果。我无法将 Bootstrap 迁移到较新的版本，因为这会极大地改变外观。只是寻找任何 ideas/opinions，因为他们将不胜感激！！

Tabs.html

<div class="container">
    <tabset type="tabs" class="nav nav-tabs" #tabselect>
        <br /><br />      
        <tab heading="Tab 1" class="active" name="tab1">
            <app-tab-one></app-tab-one>
        </tab>
        <tab heading="Tab 2" name="tab2">
            <app-tab-two></app-tab-two>
        </tab>
        <tab heading="Tab 3" name="tab3">
            <app-tab-three></app-tab-three>
        </tab>
        <tab heading="Tab 4" name="tab4">
            <app-tab-four></app-tab-four>
        </tab>
    </tabset>
</div>

Tab1.html

<div class="container">
  <div class="row col-xs-12">
      <h3>Select Data</h3>
  </div>
  <br />
  <br />
  <table class="table table-striped table-responsive">
      <tbody>
          <tr class="header">
              <th class="text-xs-left col-md-0">Number</th>
              <th class="text-xs-left col-md-0 col-lg-6">Data 1</th>
              <th class="col-md-3 col-lg-3 margin-top-xs">Data 2</th>
              <th class="col-md-3 col-lg-3 margin-top-xs">Data 3</th>
              <th class="col-md-3 col-lg-2 margin-top-xs"></th>
          </tr>
          <tr *ngFor="let x of data; let idn = index">
              <td>{{idn+1}}</td>
              <td class="text-xs-center col-md-3 margin-top-xs col-lg-4">
                  <select class="col-md-2 margin-top-xs form-control" [(ngModel)]="data[idn].data1">
                  <option value="">Please select prefix</option>
                  <option *ngFor="let x of data" type="text">{{x.data1}}</option>
                  </select>
              </td>
              <td class="text-xs-center col-md-3 margin-top-xs col-lg-4">
                  <input type="text" class="form-control" maxlength="5" />
              </td>
              <td class="col-md-3 margin-top-xs col-lg-4">
                  <input type="text" class="form-control" />
              </td>
              <td class="col-md-2 col-lg-2 text-right margin-top-xs">
                  <button class="btn btn-primary">Button</button>
              </td>
          </tr>
      </tbody>
  </table>
</div>

来自 Tab1.component.ts

的片段

import { Component, OnInit, ViewChild, Inject, ViewEncapsulation } from '@angular/core';

import { Data } from '../App/Models/Data';
import { TData } from '../App/Models/TData';

@Component({
    selector: 'app-tab-one',
    templateUrl: './Tab1.component.html',
    styleUrls: ['./tab-one.component.css'],
    providers: [ModalService, { provide: BsDropdownConfig, useValue: { autoClose: false } }]//,
    //encapsulation: ViewEncapsulation.Native ## this will enable ng Shadow Dom
})
export class TabOneComponent implements OnInit {

    tableData: Data[];
    tupleData: TData[];

***** 编辑 - 包含 Plunker 并进一步简化了代码。我保证会成为更好的海报！！ ******

**** EDIT2 - 一个 Plunker w/out 选项卡 https://plnkr.co/edit/n1dnAHvcWa2ENzIP9v7H?p=preview

必须注意，我在我的应用程序中的开发工具中看到了这种行为，但是开发工具 ~~WITHIN THE PLUNKER LIVE POP UP PREVIEW TOOL 似乎不允许响应式外形按钮UI 的左上角。不确定我还能如何模拟这个~~

响应行为在 Chrome 和使用 Plunker 的 Firefox 中起作用。但是，Firefox 允许在其开发工具的实时弹出窗口预览中进行正式的外形模拟，而 Chrome 则不允许 ****

Answer 1

重构并让 Plunker 演示问题后，我证明这是一个 Bootstrap 问题（不确定是我的错还是错误）而不是 Ngx-Bootstrap 问题.结果是 Bootstrap 形式类破坏了 table

<div class="container">
  <table class="table table-bordered">
      <thead>
        <tr class="header">
            <th class="col-xs-1">Number</th>
            <th class="col-xs-3">Data 1</th>
            <th class="col-xs-3">Data 2</th>
            <th class="col-xs-3">Data 3</th>
            <th class="col-xs-1"></th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let x of data; let idn = index">
            <td class="col-xs-1">{{idn+1}}</td>
            <td class="col-xs-3">
              <div class="form-group">
                <select class="form-control" [(ngModel)]="data[idn].data1">
                <option *ngFor="let x of data" type="text">{{x.data1}}</option>
                </select>
              </div>
            </td>
            <td class="col-xs-3">
                <input class="form-control" type="text" maxlength="5" />
            </td>
            <td class="col-xs-3">
                <input class="form-control" type="text" />
            </td>
            <td class="col-xs-1">
                <button class="btn btn-primary">Button</button>
            </td>
        </tr>
      </tbody>
  </table>
</div>

当我删除 'form-control' 类时一切正常

这是最后的Plunker

ngx-bootstrap 制表符中断 bootstrap table 响应

ngx-bootstrap Tabs breaking bootstrap table responsiveness

responsive-design

shadow-dom

twitter-bootstrap-3

ngx-bootstrap

angular