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

Question

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

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