В моем приложении классы столбцов сетки указаны следующим образом:

<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, он должен разбиваться с xs на sm при 480 пикселей, но мой не ломается до 751 или 752 пикселей. Куда мне обратиться, чтобы узнать, не изменились ли мои точки останова каким-то образом, или как узнать, почему они выходят из строя при неправильных размерах?

0
ganders 10 Янв 2014 в 08:33

2 ответа

Лучший ответ

Согласно документации Bootstrap 3, точка перерыва с .xs на .sm установите значение 768px (с максимальной шириной контейнера 750px, которая соответствует вашим "751 или 752 пикселей").
Чтобы убедиться в этом, вы можете выполнить быстрый поиск по bootstrap.css < / a>, и вы увидите, что нет ни одного значения 480px.

Я не уверен, но думаю, вы читаете документацию по Bootstrap 2. Это единственное место, где мы можем найти точку останова 480px ( параграф строительных лесов ). Этот был удален из Bootstrap 3, так как теперь он лучше подходит для мобильного использования и использует жидкостные колонки.

1
zessx 10 Янв 2014 в 08:51

Все столбцы точек останова (например, - 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>

Также я бы поместил div "row" внутри "form-group".

В этом примере излагается следующее:

  1. col-xs breakpoint (смартфоны) - 4 столбца каждый a 3 = 12
  2. точка останова col-sm (планшеты) - 4 столбца по 3 = 12
  3. col-md breakpoint (рабочий стол) - 2 столбца на 3, 1 столбец на 4, 1 столбец на 2 = 9
-1
Lowkase 10 Янв 2014 в 04:59