Question

我有以下表格：

@using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
    @Html.AntiForgeryToken()
    <h5>Some text
    </h5>
    <hr />

    @Html.ValidationSummary()
    <div class="form-group">
        @Html.LabelFor(m => m.UserName, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.UserName, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.Password, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.PasswordFor(m => m.Password, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" class="btn btn-default" value="Register" />
        </div>
    </div>
}

据我所知，当浏览器视图端口为中等或更大时，标签将显示在与关联控件相同的行上。我不明白的是，当视口小或xs时，表格是否会恢复为垂直形式？我并没有特别告诉它这样做。这只是默认的引导行为吗？此外，如果我要删除所有col-md-2和col-md-10类，表单始终将显示为垂直形式。为什么呢？

Answer 1

这只是默认的引导行为吗？

是。随着屏幕变小，布局会折叠以使其适合。

此外，如果我要删除所有col-md-2和col-md-10类，表单始终显示为垂直形式。为什么呢？

Bootstrap 3是一个移动优先布局框架。默认布局是垂直的，因此它适合移动大小的屏幕。 -md-的{{1}}位表示＆＃34;中等大小的屏幕＆＃34; （默认情况下，992px宽和向上）。因此，col-md-2表示中型屏幕上的＆＃34; 2（12个中的）列＃34;

您可以为小型，xtra-small和大屏幕添加更多课程（例如.col-md-2，col-sm-2和col-xs-2），以调整其他屏幕尺寸的布局。

快去阅读http://getbootstrap.com/css/#grid并与the examples一起玩。它告诉你需要知道的一切。

试图了解水平表单的工作原理

1 个答案: