Question

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

code is in the fiddle :)

每当页面大小减小以便输入字段放在标签下方时，输入字段就会变得非常大！我可能在这里有一些严重的自助知识差距，但我不能，因为我的生活，看看是什么导致了这一点！

有什么建议吗？我已经尝试了所有的余量：0自动等，但它没有用。而且我想让它在没有任何'黑客'的情况下工作^^

谢谢！

Answer 1

我建议你阅读一下bootstrap网格布局是如何工作的。

你的问题是col-md-5

只要您的屏幕低于此md大小，引导类就不会应用，因此宽度将恢复为默认大小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;
}

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

2 个答案: