Bootstrap 4 表不适合 d-flex 的全宽答案

【问题标题】：Bootstrap 4 tables not fits full width with d-flexBootstrap 4 表不适合 d-flex 的全宽
【发布时间】：2019-09-06 10:17:54
【问题描述】：

在新的 Bootstrap 4 中，不能再简单地将 col-md-2 之类的类应用到表的 or 标记上。

所以解决方案似乎在父级中使用 class="d-flex" ：

<tr class="d-flex">

但是当我这样做时，我的整个表不再适合父 div。而我对它无能为力。

谁能帮我找到线索？

这是表格的代码：

<div class="card-body">
   <h3 class="col-12 mt-2">Lehrer</h3>
   <table class="table table-light">
       <tbody>
            <tr class="d-flex">
                <td class="col-md-1">Florian</td>
                <td class="col-md-2">Wassermair</td>
                <td class="col-md-4">Schulbuchbeauftragter</td>

                <td class="col-md-1">
                   <a class="btn btn-primary" href="/profile/show/4">
                      <i class="icon icon-eye"></i>
                   </a>
                </td>

                <td class="col-md-1">
                   <a class="btn btn-success" href="/personal/4/edit">
                       <i class="icon icon-edit"></i>
                   </a>
                </td>
           </tr>

           <tr class="d-flex">
                <td class="col-md-1">Bernadette</td>
                <td class="col-md-2">Mayr</td>
                <td class="col-md-4"></td>

                <td class="col-md-1">
                    <a class="btn btn-primary" href="/profile/show/3">
                        <i class="icon icon-eye"></i>
                    </a>
                </td>

                <td class="col-md-1">
                    <a class="btn btn-success" href="/personal/6/edit">
                        <i class="icon icon-edit"></i>
                    </a>
                </td>
           </tr>                                                                                         
      </tbody>
   </table>
</div>

【问题讨论】：

为什么是 d-flex 而不是 row？
col-* 不适合在餐桌上使用。如果您确实需要这样做，请使用其他容器元素，例如 div。这也不是一个好习惯。
在 bootstrap-4 中，任一列应为 col 或列总和应为 12 以填充行。
没关系，如果它适合 12 个单元。整个表不再适合父 div。
如果我不必为此使用表格？你更喜欢什么？分区？那是什么桌子呢？即使你是对的？必须有一种方法来设置表格每一列的宽度......还是我错了？

标签： html css bootstrap-4 width column-width

【解决方案1】：

如果您希望表格单元格填充宽度，请使用 12 列单位...

<tr class="row mx-0">
    <td class="col-md-2">Bernadette</td>
    <td class="col-md-2">Mayr</td>
    <td class="col-md-6"></td>
    <td class="col-md-1">
        <a class="btn btn-primary" href="/profile/show/3">
            <i class="icon icon-eye"></i>
        </a>
    </td>
    <td class="col-md-1">
        <a class="btn btn-success" href="/personal/6/edit">
            <i class="icon icon-pencil"></i>
        </a>
    </td>
</tr>

或者，使用ml-auto将列推到右侧..

<tr class="row mx-0">
    <td class="col-md-2">Florian</td>
    <td class="col-md-2">Wassermair</td>
    <td class="col-md-4">Schulbuchbeauftragter</td>
    <td class="col-md-1 ml-auto">
        <a class="btn btn-primary" href="/profile/show/4">
            <i class="icon icon-eye"></i>
        </a>
    </td>
    <td class="col-md-1">
        <a class="btn btn-success" href="/personal/4/edit">
            <i class="icon icon-pencil"></i>
        </a>
    </td>
</tr>

https://www.codeply.com/go/xRodoKUKBf

【讨论】：

好吧……这让我很惊讶。它确实有效。即使没有 d-flex。好的！但是......当我使用 iPhone 尺寸并且给桌子提供“表格响应”类时，桌子太长了。我有和以前一样的问题。所以我考虑改用 div...