Question

我试图在我的应用程序中使用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>
            }

Answer 1

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

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

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

或者您可以执行类似

的操作

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

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

使用Foundation的Center fieldset

1 个答案: