Bootstrap - 列中的表重叠

Question

我似乎无法弄清楚为什么我的列在引导程序中重叠

• 我已检查过我的栏目加起来为12
• ＆＃34; row＆＃34; class总是有一个列类

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

https://jsfiddle.net/exubnw4a/

正如你所看到的，当它应该是4个单独的表时，很多这些值被getitng推到一起

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

<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>

Answer 1

您的表包含的行数比25%类的col-md-3宽。在这种情况下，您可以使用table-responsive类。

SAMPLE

Answer 2

从md（中等，大约992像素）开始，由于class="col-md-3"，主要的4个div正在缩小到25％。删除它，它将回到所有尺寸的所需100％。请参阅此屏幕截图，其中显示了如何删除它以使其适用于删除它的表：

Answer 3

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