Question

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

目标：

创建可在平板电脑/台式机/ iphone下使用的注册表单

问题：

我使用了缩略图，因为它包含我需要在表单周围包装的所有CSS。我使用了form-horizontal。桌面上的布局正常，一切都是对齐的。直到我在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-horizontal。有人说，要使用表格水平，你必须有一个宽页面..不确定它是否是真的。

那么，如果我的HTML /方法不合适，你能告诉我吗？

Answer 1

Fiddle

我找到了几个使用宽度的示例：100％强制文本框保留在其容器中。它以大页面为中心，但在桌子上，井扩展到边缘，在手机上，它将从形状水平切换到形状内联。

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

 <input class="my-input" maxlength="80" type="text" name="inputName"  />

缩略图中的引导形式水平创建错位 - 响应

1 个答案: