在Bootstrap 4中表格的特定列上的设置宽度

时间:2018-08-10 08:18:46

标签: html-table bootstrap-4

我使用Bootstrap 4在表中的列宽有问题。昨天,我发布了一个有关在表中具有相等的列宽的问题,但是今天我遇到了另一个问题。到目前为止,我已经使用col-lg-4等,因为我需要某些列的特定宽度。我现在面临的一个问题是,在迁移到Bootstrap 4之后,几乎所有表的第一列都非常宽,表中的所有其他列都向右推并紧紧靠在一起,而col-4不再起作用。

enter image description here

<tbody data-bind="foreach: mainData">
                    <tr data-bind="css: {'for-delete': ForDelete() == true,'duplicate': Duplicate() == true  } ">
                        <td class="col-sm-7">

                            <input class="form-control input-sm" id="ProcedureName" placeholder="@SharedResources.Index.AutocompleteMessage"
                                   data-bind="value:ProcedureName, validationElement: ProcedureId, attr: {'disabled' : (ForDelete() == true || Made() == true || $parent.headNurse() == false), 'id':'ProcedureName-' + @ViewBag.ProtocolType + '-' + ID() }" />
                        </td>
                        <td class="col-sm-2" data-bind="text: Employer "></td>
                        <td class="col-sm-2" data-bind="text: DateTime "></td>
                        <td class="col-sm-1">
                            <input type="checkbox" data-bind="checked: Made, event:{ change: $parent.mainDataModified}, attr: {'disabled' : ForDelete() || $parent.canEdit() == false }">
                        </td>
                        <td class="action-column">
                            <div class="row-delete glyphicon glyphicon-share-alt icon-flip" title="@SharedResources.Index.Undo" style="color: #096224; cursor: pointer;" data-bind="click: $parent.mainDataUndoRemove, visible: ForDelete() == true"></div>
                            <div class="row-delete glyphicon glyphicon-minus-sign icon-duplicate" title="@SharedResources.Index.Delete" data-bind="click: $parent.active() != 3 && Made() == false? $parent.mainDataRemove:null, visible: ForDelete() == false && $root.headNurse(), css:{'icon-disabled': $parent.active() == 3  || Made() == true}" style="color: #9E0101;cursor: pointer;"></div>
                        </td>
                    </tr>
                </tbody>

我尝试在其上添加“ class = row”,但是这会使我的整个表都喘不过气,并将所有内容移到右侧,而左侧留空,并且该表不会像应该的那样间隔开。

0 个答案:

没有答案