2

我一直在寻找使用表单布局的引导程序问题的答案。到目前为止，没有运气！！

客观的：

创建一个在平板电脑/台式机/iphone下工作的注册表单

问题：

我使用了缩略图，因为它包含了我需要在表单周围装箱的所有 CSS。我使用了水平形式。桌面上的布局还可以，一切都对齐了。直到我在 ipad 上查看（纵向）：下图；

-- 抱歉，这是我第一次发帖，所以我没有足够的积分来发图片。它看起来像：

http://dl.dropbox.com/u/21743176/Screen%20Shot%202012-11-26%20at%203.26.13%20PM.png

第一个输入框使用的是 span6，而其余的则不是。即使使用 span6，控件（标签和输入）也不会居中。我可以将标签的宽度减小到任意值，使其与中心对齐，但这意味着添加特定的@media 宽度等。

这是我的html的快照：

<div class="container">
        <div class="row-fluid">
            <div class="section">
                <ul class="thumbnails row">
                    <li class="span6 offset3">
                        <div class="thumbnail">
                                <div class="caption">
                                    <legend><h5><i class="icon-pencil"></i>    Sign-up</h5></legend>
                                    <form action="signup/user_signup" class="form-horizontal" method="POST" id="signup-form">
                                        <fieldset>
                                        <div class="control-group" id="Name">
                                            <label for="inputName" class="control-label">Name</label>
                                            <div class="controls">
                                                <input type="text" name="inputName" class="span6"/>
                                            </div>
                                        </div>
                                        <div class="control-group" id="Email">
                                            <label for="inputEmail" class="control-label">Email</label>
                                            <div class="controls">
                                                <input type="text" name="inputEmail" />
                                            </div>
                                        </div>
                                        <div class="control-group" id="Username">
                                            <label for="inputUsername" class="control-label">Username</label>
                                            <div class="controls">
                                                <input type="text" name="inputUsername" id="inputUsername"/>
                                            </div>
                                        </div>
                                        <div class="control-group" id="Pwd">
                                            <label for="inputPwd" class="control-label">Password</label>
                                            <div class="controls">
                                                <input type="password" name="inputPwd" id="inputPwd"/>
                                            </div>
                                        </div>
                                         <div class="control-group" id="CPwd">
                                            <label for="inputConfirmPwd" class="control-label">Confirm Password</label>
                                            <div class="controls">
                                                <input type="password" name="inputConfirmPwd" id="inputConfirmPwd"/>
                                            </div>
                                        </div>
                                        <div class="control-group" id="TNC">
                                            <div class="controls">
                                                <label class="checkbox">
                                                    <input type="checkbox"> Accept terms and conditions
                                                </label>
                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <div class="controls">
                                                <button type="cancel" class="btn">Cancel</button>
                                                <button type="submit" class="btn btn-primary">Send</button>
                                            </div>
                                        </div>
                                        </fieldset>
                                    </form>
                                </div>
                        </div>
                    </li>
                    <li class="span3"></li>
                </ul>
            </div>
        </div>
    </div>

问题：

我什么时候使用 form-inline 或 form-horizo​​ntal。有人说要使用 form-horizo​​ntal 你必须有一个宽页面..不确定这是不是真的。

那么，如果我的 html/方法不好，你能告诉我吗？

4

1 回答 1

0

小提琴

我发现了几个使用 width: 100% 来强制文本框留在其容器内的示例。它以大页面为中心，但在桌子上，井扩展到边缘，在手机上，它将从表单水平切换到表单内联。

.my-input
{
    width: 100%;
    padding: 4px 0 4px 0 !important;
}

 <input class="my-input" maxlength="80" type="text" name="inputName"  />
于 2013-03-28T03:16:20.237 回答