У меня эти элементы находятся на том уровне, на котором они имеют отступ. (полный 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, однако на мобильных устройствах не происходит наложения элементов.

0
Angelo 4 Окт 2018 в 21:47

1 ответ

Лучший ответ

Пытаюсь объяснить вам кое-что.

Прежде всего. Давайте иметь в виду порядок начальной загрузки 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. Для всех больших устройств вам нужно три ряда - по одному столбцу полной ширины для каждой.

1
Tommy 5 Окт 2018 в 07:46