Bootstrap形式水平：将两个输入对齐

Question

我试图弄清楚如何使用form-horizontal在Bootstrap中并排并排两个输入（如zip和city）。我尝试使用div.row封装，并将spanX类与input-block-level结合使用。

或者，我试图忽略div.row，但直接为spanX类提供输入。

问题是，输入的宽度不同。也许这是一个错误，但在某个视口（需要bootstrap-responsive.css）它可以正常工作 - 但不是大视口，有时会出现水平滚动条。

不应该使用Bootstrap的响应样式表来调整大小吗？将整个代码包装在div.container中会使情况变得更糟。

也许你甚至可以向我展示一些完全不同的解决方案？

我为你准备了jsFiddle和一些截图。您可以在标题中找到窗口的大小和视口的大小（在方括号中）。单击图像以查看完整尺寸。

Answer 1

您必须记住spanX类是以百分比形式实现的，因此有时在将多个输入区域放在同一行时，边缘将无法正确对齐。因此，当您使用span12类时，div的成员可能会变形。

标签是每线多输入场景中的另一个问题。它们占用160px，因此它们与span12输入区域不兼容。它们最适合每行一个输入span1-span10。

<form class="container-fluid">
    <div class="control-group">

        <div class="controls row-fluid">
            <input type="text" class="span11" placeholder="Street" />
        </div>

        <div class="controls controls-row row-fluid">
            <input type="text" class="span4" placeholder="Zip" />
            <input type="text" class="span7" placeholder="City" />
        </div>
    </div>
</form>

我在第二行添加了另外两个类controls-row和row-fluid - 第一行将行对齐在一起，而另一行使长度流畅。

更好的设计决策是摆脱标签 - 占位符已经完成了工作 - 如果同一行上有多个输入区域。这样您就可以使用整个11列。

由于12列结构，有时会出现水平滚动条，所以通过在body元素上设置“overflow-x：hidden”来摆脱它。

Answer 2

因为您正在更改的样式仅适用于移动屏幕设备。如果您使用上述代码;

.input-block-level{
    width:60%;

}

您只能找到仅在移动视口示例-320px / 480px上对齐的 zip 和国家/地区输入，否则它将无效。所以你必须添加这样的任何样式来添加其他媒体查询，如768px或任何你想要的。 您的代码可以不惜任何代价运行，无论是通过class方法还是通过input[type="text"]方法设置样式，只有它们应该位于确切的媒体查询中。