html - Bootstrap 3 媒体断点不起作用

Question

在我的应用程序中，我有如下指定的网格列类:

<div class="row">
    <div class="form-group">
        @Html.HiddenFor(m => m.Team.TeamId)
        @Html.Label("Add Player: ", new { @class = "col-xs-12 col-sm-4 col-md-3 control-label" })
        <div class="col-xs-6 col-sm-4 col-md-3">
            @Html.DropDownListFor(m => m.AddNewPlayerId, new SelectList(Model.AllPlayers, "PlayerId", "DisplayName"), new { @class = "form-control" })
        </div>
        <div class="col-xs-6 col-sm-4 col-md-3">
            @Html.DropDownListFor(m => m.TeamMemberTypeId, new SelectList(Model.TeamMemberTypes, "TeamMemberTypeId", "Name"), new { @class = "form-control" })
        </div>
        <div class="col-xs-12 col-sm-4 col-md-3">
            <input type="submit" value="Add Team Member" class="btn btn-primary" />
        </div>
        <div class="col-xs-12 col-sm-3 col-md-2">
            <a href="/Player/AddNewPlayer" class="btn btn-primary">Create New Player</a>
        </div>
    </div>
</div>

如你所见，我已将它们设置为

col-xs-12, col-sm-4, ...
or
col-xs-6, col-sm-4, ...

我的问题是，根据 Bootstrap 3 规范，它应该在 480 像素处从 xs 断开到 sm，但我的问题直到 751 或 752 像素才断开。我该去哪里查明我的断点是否没有以某种方式更改，或者如何查明它们为何在不正确的尺寸处中断？

Answer 1

根据 Bootstrap 3 documentation ，.xs 到 .sm 断点设置为 768px(最大容器宽度为 750px，这适合您的“751 或 752px”)。
为确保这一点，您可以在 bootstrap.css 上进行快速搜索。 ，您会看到没有一个 480px 值。

我不确定，但我认为您正在阅读 Bootstrap 2 文档。这是我们唯一可以找到 480px 断点 (Scaffolding paragraph) 的地方。这个已从 Bootstrap 3 中删除，因为它现在更适合移动使用和使用流体柱。