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