Как масштабировать и выровнять по ширине переменное количество картинок-иконок в Bootstrap?

Question

[immanuilivanoff]

Есть иконки соц сетей. Их переменное количество (может быть меньше или больше, чем на скриншоте)
Есть вёрстка на базе Bootstrap 3. В неё есть колонка md4. Внутри колонки необходимо вывести все иконки в одну строку (желательно по всей ширине колонки).
Как это сделать?

1. Стандартный класс img-responsive для изображений сделает из реального (и слишком крупного) размера, если они меньше чем ширина блока (так что они выстроятся в колонку).
   
2. Поместить каждую картинку в div к классом md (а количество колоном подсчитать по числу иконок с помощью php) - плохо, т.к. между иконками образуется много пустого пространства. Да и как выровнять 5 или 7 иконок по сетке бутстрапа из 12 довольно сложно без костылей.
   

Answer 1

[Сергей delphinpro]

Что вам мешает задать контейнеру с иконками дополнительный класс и отплясывая от него выровнять иконки?
Выравнивать проще всего флексом, или дедовским методом с помощью text-align:justify + ::after с шириной 100%

UPD https://jsfiddle.net/DelphinPRO/eutqdqv1/

Comments

[immanuilivanoff]

Извините, но ни разу не помогли.
ещё раз, задача сделать массташбируемые по ширине/высоте (в зависимости от размеров контейнера) и выравниваемые по ширине (контейнера же) картинки при их потенциально переменном количестве. Желательно без костылей.

[Сергей delphinpro]

immanuilivanoff: так и вы не всё сразу сказали
>> массташбируемые по ширине/высоте (в зависимости от размеров контейнера)
Чуть позже освобожусь, покажу, как можно сделать.

[immanuilivanoff]

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

[Сергей delphinpro]

immanuilivanoff: Если я правильно понял, то требуется сделать что-то такое - https://jsfiddle.net/DelphinPRO/eutqdqv1/
Да?

[immanuilivanoff]

Сергей: да, спасибо! только JS конечно не нужен - массив иконок заранее готовится на сервере (просто не хочется каждый раз CSS править при его изменении)

[Сергей delphinpro]

immanuilivanoff: javascript я воткнул исключительно для демо-примера :)