Сетка Фундамент - небольшие устройства
Предположим, у нас есть простой макет сетки на небольших устройствах, два, ширине 25% и 75%.
Совет: Определить экран небольшого устройства меньше , чем 40.0625em .
Мы используем небольшие устройства .small-* категории.
<div class="small-3 columns">....</div> <div class="small-9 columns">....</div>
Следующие примеры созданы две колонки, соотношение составляло 25% и 75% (Фонд мобильного первого: Если не указано, большое оборудование наследует .Small класса код): .small в них те , и использование ".
примеров
<Div класс = "строка">
<Div класс = "маленькие-3 колонки" стиль = "цвет фона: желтый;">
<P>? Этот учебник </ p>
</ Div>
<Div класс = "маленькие-9 столбцов" стиль = "цвет фона: розовый;">
<P>? Этот учебник </ p>
</ Div>
</ Div>
<Div класс = "маленькие-3 колонки" стиль = "цвет фона: желтый;">
<P>? Этот учебник </ p>
</ Div>
<Div класс = "маленькие-9 столбцов" стиль = "цвет фона: розовый;">
<P>? Этот учебник </ p>
</ Div>
</ Div>
Попробуйте »
 | Примечание: Для того, чтобы убедиться , что число столбцов добавить до 12! |
|---|
Если вам необходимо установить соотношение 33,3% / 66,6%, вы можете использовать .small-4 и .small-8 :
примеров
<Div класс = "строка">
<Div класс = "маленькие-4 колонки" стиль = "цвет фона: желтый;">
<P>? Этот учебник </ p>
</ Div>
<Div класс = "маленькие-8 столбцов" стиль = "цвет фона: розовый;">
<P>? Этот учебник </ p>
</ Div>
</ Div>
<Div класс = "маленькие-4 колонки" стиль = "цвет фона: желтый;">
<P>? Этот учебник </ p>
</ Div>
<Div класс = "маленькие-8 столбцов" стиль = "цвет фона: розовый;">
<P>? Этот учебник </ p>
</ Div>
</ Div>
Попробуйте »