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规格，它应该从480sx的xs到sm断开，但是我的直到751或752px都没有破坏。我该去哪里找出我的断点是不是以某种方式改变了，或者如何找出他们为什么破坏了不正确的尺寸？

Answer 1

根据Bootstrap 3 documentation，.xs到.sm breackpoint设置为768px（最大容器宽度为750px，适合您的“{1}} 751或752px“）。
为了确保这一点，您可以在bootstrap.css上快速搜索，并且您会看到没有一个480px值。

我不确定，但我认为你正在阅读Bootstrap 2文档。这是我们找到480px breackpoint（Scaffolding paragraph）的唯一地方。这个已从Bootstrap 3中删除，因为它现在更适合移动使用并使用流体柱。

Answer 2

所有断点列（例如 - col-sm）在加在一起时应不等于12。

例如：

<div class="form-group">
    <div class="row">
        <div class="col-xs-3 col-sm-3 col-md-3">
            Col1
        </div>
        <div class="col-xs-3 col-sm-3 col-md-2">
            Col2
        </div>
        <div class="col-xs-3 col-sm-3 col-md-2">
            Col3
        </div>
        <div class="col-xs-3 col-sm-3 col-md-2">
            Col4
        </div>
    </div>
</div>

我也会将“row”div放在“form-group”中。

该示例列出了以下内容：

col-xs断点（智能手机） - 每列4列= 3 = 12
col-sm断点（片剂） - 每列3 = 12
col-md断点（桌面） - 3列1列，4列1列，2列1列= 9

Bootstrap 3媒体断点无法正常工作

2 个答案: