相关疑难解决方法(0)

我正在使用Twitter Bootstrap框架试图得到这样的布局:

这就是它现在的样子:

目前的布局http://f.cl.ly/items/1n3y0F1I3D282g2U1J3Z/Screen%20Shot%202012-07-28%20at%209.09.10%20PM.png

jsFiddle全屏

的jsfiddle

表单容器的宽度根据浏览器的宽度而变化(Twitter Bootstrap的CSS媒体查询).图标框的宽度始终为14px.

我尝试了基于静态宽度侧边栏/流体内容CSS布局的不同内容,以尝试使文本输入宽度填满.

我认为我唯一的选择是创建自己的CSS媒体查询,定义文本输入的绝对宽度.

我在尝试解决此问题时遇到问题.文档说我应该将跨度设置为等于父跨度,但是,当我这样做时,它会延伸到井容器的右侧.在移动设备上查看它看起来很好(向右延伸适当的数量,填充井),然而,它在桌面上不能很好地运行(我希望字段在井内延伸).

<div class="container">
    <div class="row">
        <div class="span4 offset4">
            <div id="login-panel">
                <div class="well bordered clearfix">
                    <div class="text-center">
                        <div class="page-header" style="border-bottom: none; margin: 0;">
                            <img src="library/img/logo-01.png"/>
                        </div>
                    </div>
                    <form method="POST" action="#" accept-charset="UTF-8" class="pull-left">
                        <legend>App name</legend>
                        <div class="control-group ">
                            <!-- username field -->
                            <div class="controls">
                                <label>Email</label>
                                <input class="span4" type="text" name="email" value="" id="email" placeholder="Your email address">
                            </div>
                        </div>

                        <div class="control-group">
                            <label>Password</label>
                            <!-- password field -->
                            <input type="password" name="password" id="password" placeholder="Password">
                        </div>
                        <div class="control-group ">
                            <p>
                                <input class="btn btn-default pull-left" type="submit" value="Sign-up">
                                <input class="btn btn-primary …