在移动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屏幕上的空白栏上浪费空间。

尝试类似：

    <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（小）屏幕上使输入组更窄