Bootstrap的clearfix在表内不起作用

Question

我正在处理一个复杂的表，最终会在一行中使用Bootstrap的网格系统获取一个表单。

问题是col-*类浮动，因此我们需要将.clearfix添加到父容器中，以使其不会忽略内容的高度。好吧，只是尝试在表格中使用.clearfix，您会发现修复程序使用的:before和:after元素获得了不需要的高度，导致某种填充容器。

这里有一段显示带有clearfix错误的单元格结构的代码：

<td colspan="4">    
    <div class="clearfix">
        <div class="col-xs-4">
            <input name="name">
        </div>
        <div class="col-xs-8">
            <input name="nickname">
        </div>
    </div>
</td>

Answer 1

在阅读了how .clearfix works的解释后，我删除了一些不必要的内容，并设法创建了一个替代类，该类在display:table;的元素内部也可以使用：

.clearfixfix {
  content: "";
  clear: both;
  display: block;
}

目前仅在镀铬中测试过。