Question

我制作了一个fiddle，这基本上就是我正在使用的应用程序的登录窗口。

当窗口屏幕尺寸减小之前，控件堆叠在彼此之上，标签被输入控件重叠。我可以简单地为标签添加更多的跨度绕过这个，但标签的跨度会使输入之间产生太大的差距。

我的解决方案（未在fiddle中完成）是将固定像素分配给标签，父包装器停止重叠以及对排水沟（间隙）有更多控制但我想这不是最佳实践和代码变得混乱。关于做我想要完成的事情的优雅方式的任何建议？

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

<div class="row-fluid">
    <div class="span6 offset3">
        <div class="login_frame">
            <div style="text-align: center;">
                 <h2>Title</h2>
            </div>
            <div class="row-fluid">
                <div class="span2">
                    <label>Username</label>
                </div>
                <div class="span9">
                    <input type="text" class="input-block-level">
                </div>
            </div>
            <div class="row-fluid">
                <button class="span3 offset8">Log in</button>
            </div>
        </div>
    </div>
</div>

Answer 1

为此你必须消除bootstrap的Grid UI并将自定义的CSS应用于它......

由于Grid的UI是一些限于表单元素的东西，你必须做一些改变......

我的演示： - http://jsfiddle.net/QagSy/7/

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>

CSS -

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

希望这对你有用...... 感谢...

Twitter Bootstrap - 将标签与文本输入对齐（建议的练习）

1 个答案: