Почему эти элементы бутстрапа не складываются в мобильном? - PullRequest
Новая
       25

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

0 голосов
/ 04 октября 2018

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

1 Ответ

0 голосов
/ 05 октября 2018

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

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

...