在移动端 Bootstrap3 上发布渲染表单

Question

对于某些人来说，这会很容易，我有以下网页，这正是我要找的，它在页面中间对齐

但是，当我将其最小化以查看它在移动屏幕上的呈现方式时，它看起来像这样

怎么会有人在里面写电子邮件地址？谁能告诉我我做错了什么，这是我的 HTML

<div class="row">
<div class="container">
    @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { @class = "form-inline" }))
    {
        <div class="row">
            <div class="col-xs-12 text-center">
                <p class="text-center">
                    <strong>Enter your email and get special information:</strong>
                </p>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-3"></div>
            <div class="col-xs-6">
                <div class="input-group input-group">
                    @Html.TextBoxFor(m => m.EmailAddress, new { @class = "form-control", placeholder = "Email address" })
                    <div class="input-group-btn">
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </div><!-- /btn-group -->
                </div><!-- /input-group -->
            </div><!-- /.col-xs-12 -->
            <div class="col-xs-3"></div>
        </div><!-- /.row -->
    }
</div>

Answer 1

指定列时不仅仅使用 XS（超小屏幕）网格
不要在 XS 屏幕上的空白栏上浪费 space。

试试这样的东西：

    <div class="row">
        <div class="hidden-xs col-sm-3"></div>
        <div class="col-xs-12 col-sm-6">
            <div class="input-group input-group">
                @Html.TextBoxFor(m => m.EmailAddress, new { @class = "form-control", placeholder = "Email address" })
                <div class="input-group-btn">
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div><!-- /btn-group -->
            </div><!-- /input-group -->
        </div><!-- /col -->
        <div class="hidden-xs col-sm-3"></div>
    </div><!-- /.row -->

在 XS 屏幕上将输入组增加到整行
才开始在 SM（小）屏幕上缩小输入组

在移动端 Bootstrap3 上发布渲染表单

Issue rendering form on mobile Bootstrap3

html

twitter-bootstrap-3