Программное удаление столбца сетки Foundation 6

Я использую основу 6 в новом проекте и наткнулся на проблему. У меня есть сетка, и я хочу скрыть столбец (который я хочу снова показать позже), проблема в том, что если я скрою столбец, он не изменит порядок всех остальных столбцов, я попытался просто скрыть его с помощью jQuery и скрывая его с помощью класса Foundation hide (что, я думаю, в основном одно и то же). Единственный способ добиться желаемой функциональности — это полностью удалить столбец, но мне нужно показать его снова позже, поэтому это не вариант.

Пожалуйста, взгляните на скрипку, чтобы лучше понять, что мне нужно. (Вам придется снова запустить скрипт после нажатия одной из кнопок)

ссылка JsFiddle


person Last Templar    schedule 01.02.2016    source источник


Ответы (1)


Основная проблема заключается в том, что вы неправильно используете классы, например, размер столбца следует применять к столбцу, а не к элементам строки.

<div class="column">

Должно быть:

<div class="small-4 column">

https://jsfiddle.net/875ascsk/4/

person David Nguyen    schedule 01.02.2016
comment
вау, спасибо, я только что видел в шаблоне фонда людей, использующих только column вместе с small-up-4, medium-6 в row. Я предполагаю, что теперь мне просто нужно добавить small-4 и medium-6 к каждому column? - person Last Templar; 01.02.2016
comment
@LastTemplar всегда должен быть в столбце, я работал с Foundation 5 и никогда не видел, чтобы он помещался в строку. - person David Nguyen; 02.02.2016
comment
это пример, который я использовал - person Last Templar; 02.02.2016
comment
@LastTemplar Я вижу, что это особый тип сетки, в котором столбцы разнесены по индексу, поэтому скрытие не повлияет на их позиции. - person David Nguyen; 02.02.2016