Twitter引导程序：减小页面大小时，输入字段会占用太多空间

Question

这是一个jsfiddle http://jsfiddle.net/R5TB2/

code is in the fiddle :)

每当页面大小减小从而将输入字段放置在标签下方时，输入字段就会变得非常大！ 我可能在这里存在一些严重的自举知识鸿沟，但是我一生都无法看到是什么原因造成的！

有什么建议么？ 我已经尝试了所有的余量：0自动等，并且它没有用。 我想在没有任何“ hacks”的情况下使它工作^^

谢谢！

Answer 1

我建议您阅读有关引导网格布局如何工作的信息。

你的问题是这个， col-md-5

一旦您的屏幕低于此md大小，bootstrap类将不适用，因此，宽度将诉诸于其默认大小auto，它将自动扩展以适合其父容器。

您应该使用xs

Answer 2

小提琴： http : //jsfiddle.net/R5TB2/1/

您必须更改BT类：

col-md-*到col-xs-*

摘录：更改

<label class="col-md-5 control-label" for="username">Username:</label>
    <div class="col-md-2">
        <input id="username" class="form-control" type="text" placeholder="Username.." />
    </div>

至

<label class="col-xs-5 control-label" for="username">Username:</label>
    <div class="col-xs-2">
        <input id="username" class="form-control" type="text" placeholder="Username.." />
    </div>

这是文档： http : //getbootstrap.com/css/#grid

评论后更新

看这个小提琴： http : //jsfiddle.net/9URh5/

您可以为每个装置添加类

再次更新：

调整窗口大小时，请查看以下本机类：

@media (min-width: 768px)
.form-horizontal .control-label {
text-align: right;
}