0

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

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

我的解决方案（未在小提琴中完成）是将固定像素分配给标签和父包装器以停止重叠以及对装订线（间隙）进行更多控制，但我认为这不是最佳实践并且代码变得混乱. 关于优雅地做我想要完成的事情的任何建议？

我正在使用 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>
4

1 回答 1

0

为此，您必须消除引导程序的网格 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; }
}

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

于 2013-07-09T05:04:18.590 回答