Table Twitter 中的内部表单和内部模态 Bootstrap 显示不正确，缺少填充

Question

我这里有一个情况，也许解决方案很简单，但直到现在我都找不到出路，所以我需要一些帮助。

我有这个 HTML 代码：

<div class="modal fade in" id="selectFabricante" tabindex="-1" role="dialog" aria-labelledby="selectFabricante" aria-hidden="false" data-backdrop="static" style="display: block; padding-right: 17px;"><div class="modal-backdrop fade in" style="height: 611px;"></div>
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Cerrar</span></button>
                <h4 class="modal-title">Seleccione uno o más fabricantes</h4>
            </div>
            <div class="modal-body">
                <form id="fabForm" method="post" class="form-horizontal bv-form" novalidate="novalidate"><button type="submit" class="bv-hidden-submit" style="display: none; width: 0px; height: 0px;"></button>
                    <div class="form-group">
                        <div class="table-responsive">
                            <table class="table table-condensed">
                                <thead>
                                <tr>
                                    <th><input type="checkbox" id="toggleChkSelFabricante" name="toggleChkSelFabricante"></th>
                                    <th>Fabricante</th>
                                </tr>
                                </thead>
                                <tbody id="selFabricanteBody"><tr data-idproductosolicitud="1" data-id="1"><td><div class="checkbox"><label><input type="checkbox" name="fabLinkChoice[]" value="1"></label></div></td><td>Dist1</td><td>DR</td><td class="has_pais fabTd-1"><span id="14">México</span>, <span id="15">Nicaragua</span>, <span id="16">Panamá</span></td><td>1212212</td></tr><tr data-idproductosolicitud="1" data-id="1"><td><div class="checkbox"><label><input type="checkbox" name="fabLinkChoice[]" value="1"></label></div></td><td>Dist1</td><td>DR</td><td class="has_pais fabTd-1"><span id="14">México</span>, <span id="15">Nicaragua</span>, <span id="16">Panamá</span></td><td>1212212</td></tr></tbody>
                            </table>
                        </div>
                    </div>
                    <div>
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Regresar</button>
                        <button type="submit" class="btn btn-primary" disabled="" id="btnAgregarSelFabricante"><i class="fa fa-save"></i> Agregar</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

渲染如下图所示：

该标记有什么问题？我正在使用最新版本的 Twitter Bootstrap。有什么帮助吗？有什么建议吗？

一些说明：

我需要表单中的 table 因为它是表格数据和语义我认为这是正确的选择
我需要表单，因为我在文档中使用 BootstrapValidator plugin and as says here 正确的标记，并且我需要至少选中一个复选框，然后才能启用提交按钮并允许发送表单

Answer 1

删除元素 <div class="form-group"> 及其围绕 <div class="table-responsive"> 的结束标记。这将解决填充问题。 checkbox class 也有问题。如果您从包含复选框的 <div> 中删除 checkbox class，它将正确对齐。

Table Twitter 中的内部表单和内部模态 Bootstrap 显示不正确，缺少填充

Table inside form and both inside modal in Twitter Bootstrap does not display right, padding are missing

html

css

twitter-bootstrap

twitter-bootstrap-3