Bootstrap 4中的表列大小不相等

Question

我正在将项目迁移到Bootstrap4。在以前的Bootstrap 3版本中，所有三列的宽度均相等。在Bootstrap 4中，第一列非常宽，而其他两列则在最右侧挤压在一起。

以前怎么样：

现在如何：

正如您在第二张图片上看到的那样，第一列占用的空间太多，我需要所有三列的大小均相等。 html看起来像这样：

<table id="mDataTable" data-cols-num="6" class="table" aria-describedby="mDataTable_info">
  <thead>
    <tr class="search-cols" style="display: none;" role="row"></tr>
    <tr role="row">
      <td class="header-action-row" style="border:none; cursor:default;" colspan="11">
        <h5 class='datatable-title'><span class='fa fa-list'></span>&nbsp; @SharedResources.Index.ListOfBradenScale</h5>
        <div class="action-images pull-right">
          <div class="add-img fa fa-plus-circle" style="cursor:pointer;" title="@SharedResources.Index.Add" data-bind="click: mainDataAdd"></div>
        </div>
      </td>
    </tr>
    <tr>
      <th data-bind="click: function () {mainDataRefreshData(1,1)}, css: mainDataUserNameIcon">@SharedResources.Index.Employee</th>
      <th data-bind="click: function () {mainDataRefreshData(1,2)}, css: mainDataDateAndTimeIcon">@SharedResources.Index.Date</th>
      <th data-bind="click: function () {mainDataRefreshData(1,3)}, css: mainDataCalculateIcon">@SharedResources.Index.Risk</th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tr data-bind="visible: mainData() == null || mainData().length < 1">
    <td data-bind="attr: { 'colspan': 5 }">
      <div class="alert alert-warning" role="alert"> @SharedResources.Index.NoData</div>
    </td>
  </tr>
  <tbody data-bind="foreach: mainData">
    <tr style="cursor:pointer;" data-bind="click :$parent.mainDataSelectRow.bind($data,$index()),
                        css: { 'row-selected': $parent.mainDataSelectedRowPosition() != null && $index() == $parent.mainDataSelectedRowPosition(), 'for-delete': ForDelete() == true  }">
      <td class="col-4" data-bind="text: UserName, click: $root.mainDataDetails, attr : {'disabled' : ForDelete} "> </td>
      <td class="col-4" data-bind="text: DateAndTime, click: $root.mainDataDetails, attr : {'disabled' : ForDelete}  "></td>
      <td class="col-4" data-bind="text: CalculateRisk, click: $root.mainDataDetails, attr : {'disabled' : ForDelete}  "></td>
      <td class="action-column">
        <div class="row-delete fa fa-copy icon-blue" title="@SharedResources.Index.CopyIntoNewEntry" data-bind="click: $parent.copyIntoNew, visible: ForDelete() == false"></div>
      </td>
      <td class="action-column">
        <div class="row-delete fa fa-share icon-flip" title="@SharedResources.Index.Undo" style="color: #096224; cursor: pointer;" data-bind="click: $parent.mainDataUndoRemove, visible: ForDelete() == true"></div>
        <div class="row-delete fa fa-minus-circle icon-delete" title="@SharedResources.Index.Delete" data-bind="click: CanDelete()? $parent.mainDataRemove: null, visible: ForDelete() == false, css:{'icon-disabled': CanDelete() == false}"></div>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

尝试从代码中删除class =“ col-4”。

Answer 2

将类row添加到tr。由于类row包含display:flex;，其flex-items会按预期呈现。

更新：  在行类中添加mx-0并将这些图标包装在最后一个<td class="col-4">本身

如果您不希望td出现在网格列中，并且希望使整个表具有响应性，请从td中删除col-4，从{{1}中删除row mx-0 }。将表格包装在tr

中