4

我试图弄清楚如何在 Bootstrap 中使用form-horizontal. 我尝试将div.row包装器与spanX类结合使用input-block-level。

或者，我试图省略div.row但直接给输入spanX类。

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

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

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

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

4

2 回答 2

1

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

标签是每行多输入场景中的另一个问题。它们占用 160 像素，因此它们与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”来摆脱它。

于 2013-04-14T19:13:37.060 回答
0

因为您要更改的样式仅适用于移动屏幕设备。如果你使用上面的代码；

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

}

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

于 2013-04-14T19:14:59.770 回答