防止复选框标签在视口上的复选框下移动缩小在Bootstrap 3中

Question

我使用Bootstrap网格系统制作了一个填充了复选框的大表单。每个复选框都有自己的.col-xs-*类，以保持对齐并且看起来干净。

问题在于，当用户缩小视口时，某些标签会移动到复选框下方，这看起来有点乱：

要解决此问题，我刚刚将col-*类扩大（例如将.col-xs-4更改为.col-xs-5）或添加.form-group和.form-control用于创建“checkboxey区域”的类，但我想可能有一个更清晰的解决方案。

• 是否有一种Bootstrappy方法可以保持这些复选框对齐（当标签的宽度超过col-xs-*容器的宽度时）？
• 我是否可以使用一些简单的CSS规则将修补程序应用于这些表单字段？

这是一个JSFiddle示例，说明我的表单现在的样子。

Answer 1

把这个：

.space {
    white-space: nowrap;
}

在您的css文件中

并将其应用于您的div。它将删除空格并使表单字段看起来很好。