Bootstrap 列包装在移动设备上，应该完全适合内联答案

【问题标题】：Bootstrap columns are wrapping on mobile devices that should fit perfectly inlineBootstrap 列包装在移动设备上，应该完全适合内联
【发布时间】：2019-06-13 00:07:46
【问题描述】：

我有一堆 .col-xs-3 和 .col-xs-9 列应该完全适合内联。它们在桌面上执行，即使媒体查询的宽度在 300 像素及以下，但是当我在实际的移动设备（包括最新的 iPhone 型号）上查看页面时，列会换行。

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

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

它在移动设备上的实际外观（不正确）

到目前为止我所做的尝试

我已经开始了一种解决方法，我在行上禁用 flex-wrap: wrap，但这确实没有必要，因为引导程序大小应该完全匹配。

编辑

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

我的一些sn-ps：

.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 也不会将标签和字段内联，这几乎总是有效的。

【问题讨论】：

添加您目前所做的作为示例，请read
@YashKaranke 添加了更多关于我迄今为止尝试过的内容和信息
请阅读Minimal, Complete, Variable example，这意味着您正在尝试的代码的 sn-p 以及您希望从问题中完成的目标
我们需要 HTML 和 CSS 来解决这个问题。我在手机上调出它并通过开发工具甚至在 Iphone 5 上运行它，我觉得它看起来不错。
@KJEK-Code 查看编辑

标签： html css twitter-bootstrap twitter-bootstrap-3 flexbox

【解决方案1】：

问题已解决！ Bootstrap 通过::before 在每一行内放置一个 0x0 px display: table 伪元素，尽管它不应该有大小，但它导致列换行。在我的表单中强制将该伪设置为display: none，现在一切都正常显示了。

【讨论】：