Bootstrap列包裹在应完美内联的移动设备上

Question

我有一堆.col-xs-3和.col-xs-9列，应该完美地内联。即使是在300px及以下的狭窄媒体查询中，它们也可以在台式机上运行，​​但是当我在实际的移动设备（包括最新的iPhone机型）上查看页面时，列会自动换行。

您可以在这里查看我的页面：https://affordable-healthcare-plans.org/p/signup-4.php

通过小型媒体查询在桌面上的外观（正确）

它在移动设备上的实际外观（错误）

到目前为止我尝试过的事情

我已经开始一种变通方法，在该行中我禁用了行上的flex-wrap: wrap，但这实际上不是必需的，因为引导程序大小应该完全匹配。

编辑

我可以链接到源，但是我的问题主要是我在使用带有一些自定义CSS的引导程序，但我不知道问题的出处。在老型号上对我来说看起来不错。

我的一些摘要：

.form-contain .col-md-6 .row {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    align-items: center;
}

.row > label {
    text-align: right;
    white-space: nowrap;
    position: relative;
    left: -15px;
    display: flex;
    justify-content: flex-end;
}

添加white-space: nowrap也不会使标签和字段内联，这几乎总是可行的。

Answer 1

Issue resolved! Bootstrap was placing a 0x0 px display: table pseudo-element via ::before inside each row, and somehow although it should have no size, it was causing the columns to wrap. Forced that pseudo to display: none within my form and now everything displays properly.