表行中最右边的引导按钮，不像单元格答案

【问题标题】：Bootstrap buttons far right in table-row, not cell-like表行中最右边的引导按钮，不像单元格
【发布时间】：2017-02-02 16:50:45
【问题描述】：

我正在尝试重新创建您可以在下图中看到的那种布局：

如果没有将按钮放在单元格中，我找不到如何将按钮放在每行的末尾。如果它必须在一个单元格中，我想删除该单元格的所有装饰，使其看起来像表格的“外部”。

任何想法如何使用引导程序做到这一点？

我的 html 目前看起来像这样：

        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Heure</th>
                        <th>Appel</th>
                        <th>En vente</th>
                        <th>En vente web</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>2014-12-01</td>
                        <td>20:00</td>
                        <td>141201</td>
                        <td>
                            <div class="text-center">
                                <span class="glyphicon glyphicon-ok"></span>
                            </div>
                        </td>
                        <td>
                            <div class="text-center">
                                <span class="glyphicon glyphicon-ok"></span>
                            </div>
                        </td>
                        <td>
                            <a href="">
                                <span class="glyphicon glyphicon-edit"></span>
                            </a>
                            &nbsp;
                            <a href="">
                                <span class="glyphicon glyphicon-trash"></span>
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <td>2014-12-02</td>
                        <td>20:00</td>
                        <td>141202</td>
                        <td>
                            <div class="text-center">
                                <span class="glyphicon glyphicon-ok"></span>
                            </div>
                        </td>
                        <td>
                            <div class="text-center">
                                <span class="glyphicon glyphicon-minus"></span>
                            </div>
                        </td>
                        <td>
                            <a href="">
                                <span class="glyphicon glyphicon-edit"></span>
                            </a>
                            &nbsp;
                            <a href="">
                                <span class="glyphicon glyphicon-trash"></span>
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <td>2014-12-03</td>
                        <td>20:00</td>
                        <td>141203</td>
                        <td>
                            <div class="text-center">
                                <span class="glyphicon glyphicon-minus"></span>
                            </div>
                        </td>
                        <td>
                            <div class="text-center">
                                <span class="glyphicon glyphicon-minus"></span>
                            </div>
                        </td>
                        <td>
                            <a href="">
                                <span class="glyphicon glyphicon-edit"></span>
                            </a>
                            &nbsp;
                            <a href="">
                                <span class="glyphicon glyphicon-trash"></span>
                            </a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div><!-- table-responsive -->

【问题讨论】：

我建议从 UX 的角度反对它 - 当按钮位于同一表格行中时，用户可以快速了解它们会影响该行，但将它们放在表格之外会造成混乱。更好的解决方案是仅在用户悬停该行时才显示此单元格内容。

标签： twitter-bootstrap html-table

【解决方案1】：

尝试将这样的类应用于应该显示为“断开连接”的单元格：

.table.table-striped .minimal_cell {
    background: none;
    border-width: 0;
}

应用于包含图标的单元格：

<td class="minimal_cell">
    <a href="">
        <span class="glyphicon glyphicon-edit"></span>
    </a>
    &nbsp;
    <a href="">
        <span class="glyphicon glyphicon-trash"></span>
    </a>
</td>

jsFiddle：http://jsfiddle.net/eum3sn97/2/

【讨论】：

感谢您的回答。它按预期工作。如果别无选择，使用 !important 有那么糟糕吗？
实际上，您不需要!important - 我只是又看了一遍，没有它也可以工作。答案和 jsFiddle 已更新以反映这一点。