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