Отзывчивость на случайные динамические дивы

Question

Отзывчивость на случайные динамические дивы

0

У меня небольшая проблема. У меня есть динамическая страница, которая будет заполнена div. Количество разделов зависит от контента, зарегистрированного в базе данных.

Мне нужно сделать горизонтальную компоновку. Каждый div будет иметь минимальную ширину, однако всякий раз, когда они разбиваются, все они имеют одинаковую ширину.

Если нужно, у меня есть бутстрап, jquery и угловой для игры.

Я надеюсь, что фотографии могут лучше объяснить:

Shoyo 16 июль 2015, в 21:30

Источник

0

Вы можете просто поменять ng-class используя классы начальной загрузки, в зависимости от того, что вы получаете. Есть функция, которая возвращает col-md-x, где x определяется количеством полученных результатов.
ajmajmajma 16 июль 2015, в 18:48
0

Или вы можете сделать то же самое с jquery и bootstrap - вы должны знать, как настроен ваш код. Это приложение или веб-страница, или ...?
ajmajmajma 16 июль 2015, в 19:07

Теги:

jquery

angularjs

css

twitter-bootstrap-3

responsive-design

2 ответа

0

Вы можете использовать ячейки таблицы. Это может показаться старой школой, но я считаю, что это будет эффективно и надежно для этого конкретного требования.

Narendran Parivallal 16 июль 2015, в 17:37

Ещё вопросы

Вы можете просто поменять ng-class используя классы начальной загрузки, в зависимости от того, что вы получаете. Есть функция, которая возвращает col-md-x, где x определяется количеством полученных результатов.
Или вы можете сделать то же самое с jquery и bootstrap - вы должны знать, как настроен ваш код. Это приложение или веб-страница, или ...?

DWDuck · Accepted Answer · 2015-07-16T17-06-00.000Z

Этот ответ более или менее то, что предложил @ajmajmajma...

http://plnkr.co/edit/dgDPzC4wdKihS73b4d0h?p=preview

Html довольно прост:

<div class="container-fluid">
  <div ng-repeat="city in theCities" class="myInfo {{myClass}}">
    {{city.info}}
  </div>
</div>

В контроллере просто установите $ scope.myClass в зависимости от количества элементов в городах.

Уменьшите количество элементов в массиве Cities, чтобы узнать, как реагирует результат. Вероятно, есть более простой способ настроить класс, этот плункер просто пытается понять эту идею.

Это интересно, сэр. Я думал, что некоторый код JavaScript будет необходим для динамизма. Я добавил min-width: 200px, чтобы ограничить размер, и он работал как задумано. Это неправильно делать так ??
Не обязательно неправильно, нет .... но я думаю, что метод начальной загрузки будет немного более последовательным. У него есть дополнительное преимущество: его можно менять для мобильных телефонов и т. Д. Что-то вроде class = "col-xs-6 col-sm-4", что-то в этом роде. Таким образом, на маленьком устройстве вы получите 2 столбца вместо 3.