Сетка основания Zurb переместить последний столбец влево

Question

Я пытаюсь найти хороший способ использовать сетку, не взламывая ее вообще.

То, что я хочу сделать, это три широких сетки (иначе small-4 на каждом) в верхнем ряду, а затем во втором ряду я хочу, чтобы столбцы совпадали, но только с двумя small-4 элементы.

Обычно ответом будет сделать один small-4 а затем small-8 а потому что входы установлены на width: 100% это не будет работать для меня.

Есть ли способ сделать это из коробки? Я знаю о смещении, но это работает только для элементов, заданных для перемещения вправо.

На данный момент с двумя small-4 divs right div плавает right, означая, что он не совпадает с приведенным выше. Я мог бы добавить дополнительную small-4 но я хотел бы следовать лучшим практикам в этом.

Вот мой код, чтобы вы могли понять, что я имею в виду:

<div class="row">
    <div class="small-4 columns">
        <input type="text" />
    </div>
    <div class="small-4 columns">
        <input type="text" />
    </div>
    <div class="small-4 columns">
        <input type="text" />
    </div>
</div>
<div class="row">
    <div class="small-4 columns">
        <input type="text" />
    </div>
    <div class="small-4 columns">
        <input type="text" />
    </div>
</div>

Answer 1

Зурб фонд будет float последний столбец справа по умолчанию:

[class*="column"]+[class*="column"]:last-child { /* Taken from foundation.css */
  float: right;
}

Неполные строки

Чтобы обойти различные способы округления в браузерах, Foundation сместит последний столбец в строке вправо, чтобы выровнять край. [...]

Есть несколько способов переопределить это и переместить последний столбец влево:

1. Использование .end класс ^{(глючит в версии 5.0.3)}

[...] Если ваша строка не имеет счетчика, который добавляет до 12 столбцов, вы можете пометить последний столбец с классом end чтобы переопределить это поведение.

<div class="row">
    <div class="small-4 columns"> ... </div>
    <div class="small-4 columns end"> ... </div>
</div>

Хотя .end как ожидается, будет работать и в версии 5.0.3, но она не будет работать должным образом, потому что другой глобальный .end класс переопределит это. Однако это исправлено начиная с версии 5.1.0.

Пример (v4.1.6) • Пример (v5.0.3) ( глючит) • Пример (v5.1.0)

Связанные проблемы могут быть найдены здесь:

• https://github.com/zurb/foundation/issues/4215
• https://github.com/zurb/foundation/issues/4223
• https://github.com/zurb/foundation/pull/4183 [ИСПРАВЛЕНО: путем удаления глобальных классов ]

Если по какой-либо причине вы используете v5.0.3, есть несколько альтернатив:

2. Использование .left учебный класс

Один вариант будет использовать .left служебный класс в последнем столбце с плавающей точкой слева:

Пример здесь (v5.0.3).

<div class="row">
    <div class="small-4 columns"> ... </div>
    <div class="small-4 columns left"> ... </div>
</div>

3. Переопределение стиля по умолчанию

Другим вариантом может быть переопределение стиля по умолчанию для основы Zurb следующим образом:

Пример здесь (v5.0.3).

.columns.end { float: left !important; }

Или что-то вроде:

Пример здесь (v5.0.3).

[class*="column"]+[class*="column"]:last-child {
  float: left;
}

---

4. Использование исходных классов

Как правило, вы могли бы использовать *-pull-# / *-push-# исходные классы упорядочения для перемещения столбца в сторону.

В этом случае вы должны использовать small-pull-4 для второго столбца во втором ряду, следующим образом:

<div class="row">
    <div class="small-4 columns"> ... </div>
    <div class="small-4 small-pull-4 columns"> ... </div>
</div>

РАБОЧАЯ ДЕМО. (Использование Foundation 5.0.3)

Примечание: для Foundation 4 вы должны использовать pull-4 класс вместо. Взгляните на раздел заказа источника в документации. Но это будет работать только на больших дисплеях.

ОБНОВЛЕНО ДЕМО. (Использование Foundation 4.1.6)

Answer 2

Просто измените класс последнего div (который идет направо) на "small-4 column end"