Почему эти элементы bootstrap col не складываются в мобильные устройства?

У меня есть эти элементы на том уровне, на котором они имеют отступ. (полный html в скрипте http://jsfiddle.net/gbq538x2/1/)

<div class="container">
    <div id="first" class="row">
        <div class="col-sm-12">

    <div id="second" class="col-md-3 col-lg-3 col-xs-3">
    <div id="third" class="col-md-9 col-lg-9 col-sm-9 col-xs-9">

Я ожидаю, что col-sm-12 внутри #first будет складываться с #second и #third, однако на мобильных устройствах не происходит стекирования элементов.


responsive-design twitter-bootstrap responsiveness
person Angelo    schedule 04.10.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Пытаюсь прояснить для вас кое-что.

Прежде всего. Давайте вспомним порядок начальной загрузки 3 (от самых маленьких устройств к самым большим устройствам): xs, sm, md, lg

Теперь, когда вы определяете col-sm-12, это говорит не что иное, как «взять столбец width of 12 для всех sm devices and up». При определении col-anything все classes below также будут иметь width of 12, если ничего другого не определено. Итак, вы в основном определяете in all sizes take a col width of 12. Более понятно определить col-xs-12, чтобы понять это.

Теперь взгляните на col-md-3 col-lg-3 col-xs-3. col-lg-3 установит ширину столбца на 3 для больших устройств. col-md-3 установит ширину столбца на 3 для средних устройств (и выше [но это перезаписывается col-lg]), а col-xs-3 установит ширину столбца на 3 для самых маленьких устройств и выше (поскольку col-md и col-lg определены, только col-sm установлен). По сути, вы определяете in all sizes thake a col width of 3, чего также можно добиться, добавив col-xs-3. Я думаю, что вы пытаетесь достичь этого:

col-sm-3 — это определит все устройства xs с width of 12 и все устройства sm and up с width of 3.

Аналог col-md-9 col-lg-9 col-sm-9 col-xs-9, который является синонимом col-xs-9.

Попробуйте следующее:

<div class="container">
    <div id="first" class="row">
        <div class="col-xs-12">
            A column which has always a size of 12.
        </div>
        <div id="second" class="col-sm-3">
            A column which has a size of 3 for sm-devices and up and a size of 12 for xs-devices (mobile).
        </div>
        <div id="third" class="col-sm-9">
            A column which has a size of 9 for sm-devices and up and a size of 12 for xs-devices (mobile).
        </div>
    </div>
</div>

Это реализует следующее: Для мобильных устройств у вас есть две строки: одна ширина столбца шириной 12 и одна, разделенная на устройства шириной 3 и 9. Для всех больших устройств вам нужно три строки — по одному столбцу полной ширины для каждой.

person Tommy    schedule 05.10.2018