Question

我正在Angular应用中使用bootstrap 4。

在组件的html之一上，我试图将响应表嵌套在网格行内。

我按照说明将“表” div嵌套在“表响应”类的另一个div中，但该表仍未填充其嵌套的col。

这是我的网格代码：

<div class="container-fluid">
    <div class="row">
      <div class="col col-lg-10"></div>
      <div class="col col-lg-2">
        <h5  ng-app ng-controller="GetDate">
        {{date | date : 'dd.MM.yyyy'}}
        </h5>
      </div>
    </div>

    <div class="row">
      <div class="col col-lg-10"></div>
      <div class="col col-lg-2">
        {{"Welcome "+ Name}}
        </div>
    </div>

    <div class="row">
      <div class="col col-lg-10"></div>
      <div class="col col-lg-2">
        <button type="button" class=" btn btn-dark" data-toggle="modal" data-target="#modalMonthSelect">Launch Calculation</button>
      </div>
    </div>
    <div class="row">
      <div class="col-4"></div>
      <div class="col-4">
      <div class="table-responsive" >
      <div class="table table-striped table-bordered" >
        <thead>
          <tr>
            <th>Eitan</th>
            <th>Pozen</th>
            <th>Rebbi</th>
            <th>Cohen</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>500</td>
            <td>1000</td>
            <td>1500</td>
            <td>2000</td>
          </tr>
          <tr>
            <td>500</td>
            <td>1000</td>
            <td>1500</td>
            <td>2000</td>
          </tr>
        </tbody>
    </div>
  </div>
      </div>
      <div class="col-4"></div>

    </div>

</div>

这是屏幕截图：

如您所见-尽管表嵌套在“ col-4”内部，但它不会填充它。我应该怎么做才能使桌子张紧并填满整个格子？

Answer 1

在您的代码中，类别为“ table table-striped table-border”的[div]标记必须为[table]

<div class="table-responsive" >
    <table class="table table-striped table-bordered" >
        ...
    </table>
</div>

试试看，让我知道。

https://hackerthemes.com/bootstrap-cheatsheet/#table-responsive

使用上面的链接作为参考。我觉得非常方便。

响应表不会填充嵌套它的整个col

1 个答案: