Css 引导-列中的表重叠

我似乎不明白为什么我的列在引导中重叠

• 我已经检查过我的列加起来有12个
• “row”类之后总是有一个column类

我已将我的完整代码添加到小提琴中：

正如您所看到的，这些值中有很多是getitng推到一起的，而它应该是4个单独的表

以下是我的代码的简化版本：

<div class="row">
    <div class="col-md-12">
        <div class="row">
            <div class="col-md-3">
            <h1>LH5</h1>
                <table class="table">
                 table contents here
                </table>
            </div> 
            <div class="col-md-3">
            <h1>LH5</h1>
                <table class="table">
                 table contents here
                </table>
            </div> 
            <div class="col-md-3">
            <h1>LH5</h1>
                <table class="table">
                 table contents here
                </table>
            </div> 
            <div class="col-md-3">
            <h1>LH5</h1>
                <table class="table">
                 table contents here
                </table>
            </div>          
        </div>
    </div>
</div>

LH5
这里的表格内容
LH5
这里的表格内容
LH5
这里的表格内容
LH5
这里的表格内容

从

md

（中等，大约992像素）开始，由于

class=“col-md-3”

，主要的4个div正在缩小到25%。去掉它，它会在所有尺寸下恢复到所需的100%。请参见此屏幕截图，该截图显示了删除操作如何使其在被删除的表中工作：

---

如果要在一行中放置4个元素，请确保它们都位于同一引导“行”类中。在您的情况下，您必须将所有表放在一行中，而不是为每个表创建新行。

您的表包含的行比

col-md-3

类的

25%

多。在这种情况下，您可以使用

表响应

类

---

有一条很好的评论，现在被删除了，它指出，当您从一个表转到另一个表时，您的

并没有关闭。清理似乎不会影响事物，但应通过在必要时添加关闭

来修复。