1

我试图在我的应用程序中使用 Foundation 网格，但我不能简单地将字段集居中。我尝试将其放在移动设备和台式机的屏幕中央，但它看起来很奇怪。知道为什么吗？

请注意，我是 Foundation 新手，我没有使用 Bootstrap 的经验

下面的代码：

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)
    <div class="row">
        <div class="large-6 large-centered columns">
            <fieldset>
                <legend>Logging into Review Platform</legend>
                <div class="editor-label">
                    @Html.LabelFor(model => model.UserName)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.UserName)
                    @Html.ValidationMessageFor(model => model.UserName)
                </div>

                <div class="editor-label">
                    @Html.LabelFor(model => model.Password)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.Password)
                    @Html.ValidationMessageFor(model => model.Password)
                </div>

                <p>
                    <input type="submit" value="Login" class="button" />
                </p>
            </fieldset>
        </div>
    </div>
            }
4

1 回答 1

1

重复和编辑我对原始问题的评论：

您是否想要在移动设备上全宽并以桌面为中心？我经常这样做：

.small-12.large-6.large-centered.columns

或者你可以做类似的事情

.small-10.small-centered.large-6.columns

您不需要，large-centered因为它从small-centered类继承。如果您希望较大的网格不居中，请使用.large-uncentered

于 2013-07-22T07:53:17.460 回答