Фонд поле ввода? Размер
С помощью столбца решетки , чтобы установить размер входного окна, такие как .large-6 , .medium-6 , и так далее.
Больше знаний системы сетки, вы можете нажать на системной сетке обучающей программы .
примеров
<Форма>
<Div класс = "строка">
<Div класс = "большой 10 средних-7 колонн">
<Label> большого 10 средне- 7 (100% от мала)
<Тип входного = "текст" заполнитель = "Name">
</ Label>
</ Div>
</ Div>
<Div класс = "строка">
<Div класс = "маленькие-5 столбцов">
<Label> малого 5
<Тип входного = "текст" заполнитель = "Name">
</ Label>
</ Div>
</ Div>
<Div класс = "строка">
<класс = "Див среднего 3 колонны">
<Label> среднего 3 (100 % от мала)
<Тип входного = "текст" заполнитель = "Name">
</ Label>
</ Div>
</ Div>
</ Форма>
<Div класс = "строка">
<Div класс = "большой 10 средних-7 колонн">
<Label> большого 10 средне- 7 (100% от мала)
<Тип входного = "текст" заполнитель = "Name">
</ Label>
</ Div>
</ Div>
<Div класс = "строка">
<Div класс = "маленькие-5 столбцов">
<Label> малого 5
<Тип входного = "текст" заполнитель = "Name">
</ Label>
</ Div>
</ Div>
<Div класс = "строка">
<класс = "Див среднего 3 колонны">
<Label> среднего 3 (100 % от мала)
<Тип входного = "текст" заполнитель = "Name">
</ Label>
</ Div>
</ Div>
</ Форма>
Попробуйте »
Равный к размеру колонки
Ниже приведены примеры столбцов одинакового размера:
примеров
<Форма>
<Div класс = "строка">
<класс = "Див среднего 4 колонки">
<Label> средний-4 (100 % на маленькие, сложены)
<Тип входного = "текст" заполнитель = "Name">
</ Label>
</ Div>
<класс = "Див среднего 4 колонки">
<Label> средний-4 (100 % на маленькие, сложены)
<Тип входного = "текст" заполнитель = "Name">
</ Label>
</ Div>
<класс = "Див среднего 4 колонки">
<Label> средний-4 (100 % на маленькие, сложены)
<Тип входного = "текст" заполнитель = "Name">
</ Label>
</ Div>
</ Div>
</ Форма>
<Div класс = "строка">
<класс = "Див среднего 4 колонки">
<Label> средний-4 (100 % на маленькие, сложены)
<Тип входного = "текст" заполнитель = "Name">
</ Label>
</ Div>
<класс = "Див среднего 4 колонки">
<Label> средний-4 (100 % на маленькие, сложены)
<Тип входного = "текст" заполнитель = "Name">
</ Label>
</ Div>
<класс = "Див среднего 4 колонки">
<Label> средний-4 (100 % на маленькие, сложены)
<Тип входного = "текст" заполнитель = "Name">
</ Label>
</ Div>
</ Div>
</ Форма>
Попробуйте »
Встроенные теги
Если вы хотите , чтобы ваше содержание этикетки отображается слева ( а не сверху), вы можете пометить элемент этикетку на коробке к левому входу различных столбцов и использовать .inline класс для установки вертикального центра:
примеров
<Форма>
<Div класс = "строка">
<Div класс = "маленький-8 ">
<Div класс = "строка">
<Div класс = "маленькие-3 колонки">
<Ярлык = "имя" класса = "инлайн права"> Имя </ метка>
</ Div>
<Div класс = "стрелковое 9 столбцов">
<Тип входного = "Текст" ID = "имя" заполнитель = "Имя ..">
</ Div>
</ Div>
</ Div>
</ Div>
</ Форма>
<Div класс = "строка">
<Div класс = "маленький-8 ">
<Div класс = "строка">
<Div класс = "маленькие-3 колонки">
<Ярлык = "имя" класса = "инлайн права"> Имя </ метка>
</ Div>
<Div класс = "стрелковое 9 столбцов">
<Тип входного = "Текст" ID = "имя" заполнитель = "Имя ..">
</ Div>
</ Div>
</ Div>
</ Div>
</ Форма>
Попробуйте »
Передняя и задняя этикетка
Вы можете <div class="row collapse"> > добавить передний и задний элемент вкладки: < element class="postfix"> или < element class="prefix"> . Вы можете использовать систему сетки, чтобы установить размер передней и задней этикетки:
примеров
<Форма>
<Div класс = "строка">
<Div класс = "большой-6 колонн">
<Div класс = "строка коллапс префикс -радиус">
<Div класс = "маленькие-3 колонки">
<Span класс = "префикс"> префикс </ SPAN>
</ Div>
<Div класс = "стрелковое 9 столбцов">
<Тип входного = "текст" заполнитель = "значение">
</ Div>
</ Div>
</ Div>
<Div класс = "большой-6 колонн">
<Div класс = "строка коллапс Постфиксное -радиус">
<Div класс = "стрелковое 9 столбцов">
<Тип входного = "текст" заполнитель = "значение">
</ Div>
<Div класс = "маленькие-3 колонки">
<SPAN класс = "постфикса"> Postfix </ SPAN>
</ Div>
</ Div>
</ Div>
</ Div>
</ Форма>
<Div класс = "строка">
<Div класс = "большой-6 колонн">
<Div класс = "строка коллапс префикс -радиус">
<Div класс = "маленькие-3 колонки">
<Span класс = "префикс"> префикс </ SPAN>
</ Div>
<Div класс = "стрелковое 9 столбцов">
<Тип входного = "текст" заполнитель = "значение">
</ Div>
</ Div>
</ Div>
<Div класс = "большой-6 колонн">
<Div класс = "строка коллапс Постфиксное -радиус">
<Div класс = "стрелковое 9 столбцов">
<Тип входного = "текст" заполнитель = "значение">
</ Div>
<Div класс = "маленькие-3 колонки">
<SPAN класс = "постфикса"> Postfix </ SPAN>
</ Div>
</ Div>
</ Div>
</ Div>
</ Форма>
Попробуйте »
Передняя и задняя кнопка вкладка
Вы можете использовать <a> добавить элементы .button класса , чтобы установить передние и задние кнопки:
Передняя и задняя этикетки круглые кнопки
примеров
<Форма>
<Div класс = "строка">
<Div класс = "большой-6 колонн">
<Div класс = "строка коллапс префикс -радиус">
<Div класс = "маленькие-3 колонки">
<Span класс = "префикс"> префикс </ SPAN>
</ Div>
<Div класс = "стрелковое 9 столбцов">
<Тип входного = "текст" заполнитель = "значение">
</ Div>
</ Div>
</ Div>
<Div класс = "большой-6 колонн">
<Div класс = "строка коллапс Постфиксное -радиус">
<Div класс = "стрелковое 9 столбцов">
<Тип входного = "текст" заполнитель = "значение">
</ Div>
<Div класс = "маленькие-3 колонки">
<SPAN класс = "постфикса"> Postfix </ SPAN>
</ Div>
</ Div>
</ Div>
</ Div>
<Div класс = "строка">
<Div класс = "большой-6 колонн">
<Div класс = "строка коллапс префикс -round">
<Div класс = "маленькие-3 колонки">
<A HREF = "#" класс = "button prefix"> Go </ а>
</ Div>
<Div класс = "стрелковое 9 столбцов">
<Тип входного = "текст" заполнитель = "значение">
</ Div>
</ Div>
</ Div>
<Div класс = "большой-6 колонн">
<Div класс = "строка коллапс Постфиксное -round">
<Div класс = "стрелковое 9 столбцов">
<Тип входного = "текст" заполнитель = "значение">
</ Div>
<Div класс = "маленькие-3 колонки">
<A HREF = "#" класс = "button postfix"> Go </ а>
</ Div>
</ Div>
</ Div>
</ Div>
</ Форма>
<Div класс = "строка">
<Div класс = "большой-6 колонн">
<Div класс = "строка коллапс префикс -радиус">
<Div класс = "маленькие-3 колонки">
<Span класс = "префикс"> префикс </ SPAN>
</ Div>
<Div класс = "стрелковое 9 столбцов">
<Тип входного = "текст" заполнитель = "значение">
</ Div>
</ Div>
</ Div>
<Div класс = "большой-6 колонн">
<Div класс = "строка коллапс Постфиксное -радиус">
<Div класс = "стрелковое 9 столбцов">
<Тип входного = "текст" заполнитель = "значение">
</ Div>
<Div класс = "маленькие-3 колонки">
<SPAN класс = "постфикса"> Postfix </ SPAN>
</ Div>
</ Div>
</ Div>
</ Div>
<Div класс = "строка">
<Div класс = "большой-6 колонн">
<Div класс = "строка коллапс префикс -round">
<Div класс = "маленькие-3 колонки">
<A HREF = "#" класс = "button prefix"> Go </ а>
</ Div>
<Div класс = "стрелковое 9 столбцов">
<Тип входного = "текст" заполнитель = "значение">
</ Div>
</ Div>
</ Div>
<Div класс = "большой-6 колонн">
<Div класс = "строка коллапс Постфиксное -round">
<Div класс = "стрелковое 9 столбцов">
<Тип входного = "текст" заполнитель = "значение">
</ Div>
<Div класс = "маленькие-3 колонки">
<A HREF = "#" класс = "button postfix"> Go </ а>
</ Div>
</ Div>
</ Div>
</ Div>
</ Форма>
Попробуйте »