Twitter bootstrap Twitter引导-将标签与文本输入对齐（建议的做法）

我做了一个测试，这基本上就是我正在使用的应用程序的登录窗口

当窗口屏幕尺寸在控件堆叠之前减小时， 标签被输入控件重叠。我可以简单地在标签上添加更多的跨度，以 避开这个问题，但是标签的跨度越大，输入之间的差距就越大

我的解决方案（未在中完成）是为标签和父包装指定固定像素，以停止重叠，并对边沟（间隙）进行更多控制，但我认为这不是最佳做法，代码变得混乱。有没有关于我要完成的事情的优雅方式的建议

我正在使用Bootstrap记录一个模板UI，我的目标是充分利用Bootstrap，减少我的临时解决方案

标题
用户名
登录

为此，您必须消除引导的网格UI，并对其应用自定义css

由于网格的用户界面仅限于表单元素，因此您必须进行一些更改

我的演示：-

Html:-

<div class="mt20">
                <div class="label_align">
                    <label class="uname_align">Username</label>
                </div>
                <div class="input_align">
                    <input type="text" class="input-block-level" />
                </div>
            </div>

希望这对你有用。。。 谢谢

.mt20 {
    margin-top: 20px; position:relative;
}
.uname_align {
    margin-top: 5px;
}
.label_align { position:absolute; width:100px; }
.input_align { margin-left:100px; }

@media (max-width:767px){
.label_align { position:static; width:auto; text-align:center; }
.input_align { margin-left:0; }
}