semantic-ui — размещение полей в форме

Как сделать такой макет с помощью .field или других методов?
Мне нужно, чтобы поле 5 занимало 2 поля.

введите здесь описание изображения


semantic-ui
person avalanche1    schedule 21.05.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

посмотрите на http://jsfiddle.net/3tzzj0de/1/ (возможно, вам придется потратить результат поле, чтобы отключить «маленький экран»

первая строка разбита на три равных поля:

<div class="three fields">
    <div class="field">...</div>
    <div class="field">...</div>
    <div class="field">...</div>
<div>

во второй строке размер поля используется в виде сетки http://semantic-ui.com/collections/form.html#field-width

<div class="fields">
    <div class="six wide field">...</div>
    <div class="ten wide field">...</div>
</div>

поэтому поля 1 и 4 не совсем выровнены, я думаю, потребуется изменить настройки сетки на основе 15 столбцов (16 по умолчанию) и разделить на 5 широких и 10 широких полей.

person challet    schedule 25.05.2015
comment
Да, я думаю, изменение настроек сетки — единственный жизнеспособный вариант. Спасибо. - person avalanche1; 27.05.2015