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

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

}

您只会发现 zip 和 country 输入仅在移动视口示例上对齐 - 320px/480px 及以上将不起作用。所以你必须添加任何这样的样式来添加其他媒体查询，比如 768px 或任何你想要的。 您的代码将不惜一切代价通过class 方法或input[type="text"] 方法对其进行样式设置，只有它们应该在确切的媒体查询中。