0 Пользователей и 1 Гость просматривают эту тему.
  • 14 Ответов
  • 1699 Просмотров
*

passer

  • Живу я здесь
  • 875
  • 70
Плитка на bootstrap
« : 30.12.2015, 16:02:25 »
Господа верстальщики. Кто-то делал плитку на bootstrap. Чтобы в цикле вывести:
Код: php
<div class="row">
<?php foreach($items as $item) : ?>  
<div class="col-xs-4"><?php echo $item->text; /*Разная длинна текста и получается бардак*/ ?></div>
<?php endforeach; ?>
</div>
Т.е.
Код: php
<div class="col-xs-4"><?php echo $item->text; /*Разная длинна текста и получается бардак*/ ?></div>
повторяется много-много раз и с разной длиной текста.
В чистом bootstrap блоки смещаются, появляются пропуски, пустые места и пр.
Плотную плитку кто-то делал? Поделитесь стилями.
*

fbr

  • Живу я здесь
  • 1283
  • 142
Re: Плитка на bootstrap
« Ответ #1 : 30.12.2015, 16:35:44 »
Стандартно - никак.
В UiKit это делается js-скриптом, прописываются каждому блоку абсолютные позиции

Теоретически думал на эту тему:
Решать на уровне php. Из исходного массива создать 3, по количеству колонок, и в 3 цикла набивать их вертикально.
Тогда они ровно лягут стопкой каждый в своей колонке.

Не проверял, может есть более изящный способ))
*

al-teen

  • Support Team
  • 2475
  • 213
  • im
Re: Плитка на bootstrap
« Ответ #2 : 30.12.2015, 16:44:19 »
Сетка буцсрака - полный отстой именно по этой самой причине. Нужно каждый ряд оборачивать в div.row. 960grid этим не страдает например.
Если совсем все плохо и сетку уже не заменить, то можно использовать вот эту штуку
*

Shustry

  • Moderator
  • 6430
  • 735
  • Рисую дизайны
Re: Плитка на bootstrap
« Ответ #3 : 30.12.2015, 16:45:47 »
На UIkit сделай. Там намного проще и удобнее.
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!
*

AlekVolsk

  • Профи
  • 6312
  • 336
Re: Плитка на bootstrap
« Ответ #4 : 30.12.2015, 16:47:47 »
Я много раз пытался сделать чистую плитку на bs2 и bs3 - штатными средствами фреймворка так и не получилось, всегда допил js.
На uikit блоки не позиционируются абсолютом, им просто устанавливается фиксированный размер скриптом, встроенным во фреймворк, причем скриптом - только высота, ширина - стилями.
*

fbr

  • Живу я здесь
  • 1283
  • 142
Re: Плитка на bootstrap
« Ответ #5 : 30.12.2015, 16:53:07 »
..
На uikit блоки не позиционируются абсолютом, им просто устанавливается фиксированный размер скриптом, встроенным во фреймворк, причем скриптом - только высота, ширина - стилями.
Нет. Именно абсолютно.
Посмотрите исходный код плитки -  http://getuikit.com/docs/grid-js.html

Или может мы про разную плитку говорим?
Если речь о блоках одинаковой высоты - то да, js-ом делается просто.
*

al-teen

  • Support Team
  • 2475
  • 213
  • im
Re: Плитка на bootstrap
« Ответ #6 : 30.12.2015, 16:59:17 »
Если имеется в виду такая плитка, как на grid.js, то лучше использовать Masonry.js или прочие аналоги. И там нафиг никакой бутстрап или кит не нужен.
*

passer

  • Живу я здесь
  • 875
  • 70
Re: Плитка на bootstrap
« Ответ #7 : 30.12.2015, 17:01:13 »
 ^-^ Оказывается не только у меня мысль появилась. Через array_chunk или js решается. Через сss нет. Но не верстальщик ни разу, поэтому и вопрос. Может туплю.
Ок. Прикручу что нибудь стороннее. Uikit или Javascript-Equal-Height-Responsive-Rows. Спасибо за наводки. Просто bootstrap уже прикручен из коробки и не хотелось заморачиваться перед праздниками.
*

AlekVolsk

  • Профи
  • 6312
  • 336
Re: Плитка на bootstrap
« Ответ #8 : 30.12.2015, 17:03:48 »
Нет. Именно абсолютно.
Посмотрите исходный код плитки -  http://getuikit.com/docs/grid-js.html
Вы приводите пример динамического грида, это, имхо, немного другое. Я имел ввиду действие data-uk-grid-match
*

AlekVolsk

  • Профи
  • 6312
  • 336
Re: Плитка на bootstrap
« Ответ #9 : 30.12.2015, 17:04:56 »
Ок. Прикручу что нибудь стороннее. Uikit или ...
С гридом помогу, я их много уже понаделал :)
*

passer

  • Живу я здесь
  • 875
  • 70
Re: Плитка на bootstrap
« Ответ #10 : 30.12.2015, 17:07:53 »
 ^-^ Пасиб. Сам прикручу. Не долго.
P.S. А может array_chunk оставлю.
*

fbr

  • Живу я здесь
  • 1283
  • 142
Re: Плитка на bootstrap
« Ответ #11 : 30.12.2015, 17:35:32 »
P.S. А может array_chunk оставлю.
В принципе, я это и имел ввиду, когда говорил о php варианте
Только есть подводный камень - если важна последовательность вывода, то при адаптивной верстке, когда колонки сложатся, последовательность измениться ..
*

passer

  • Живу я здесь
  • 875
  • 70
Re: Плитка на bootstrap
« Ответ #12 : 30.12.2015, 17:58:56 »
Ну да. Последовательность пока не важна. Будет важна отсортируем массивы. Или еще что придумаем.
*

Sven

  • Осваиваюсь на форуме
  • 107
  • 1
Re: Плитка на bootstrap
« Ответ #13 : 30.12.2015, 23:48:30 »
В bootstrap4 ввели новый компонент "card". Его по разному можно компоновать, если правильно понял вот это вроде вам нужно:
http://v4-alpha.getbootstrap.com/components/card/#columns

Сам пока не вникал в принцип работы этих карточек, может там flex используется не знаю. Поддержка flex в браузерах вроде в районе 80% пока что.
*

al-teen

  • Support Team
  • 2475
  • 213
  • im
Re: Плитка на bootstrap
« Ответ #14 : 30.12.2015, 23:56:02 »
Принцип основан на display: table-cell, а другой на display: inline-block
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Вопрос по разметке Bootstrap 3

Автор Xzizz

Ответов: 3
Просмотров: 397
Последний ответ 05.01.2017, 13:43:59
от dmitry_stas
Отключение Bootstrap

Автор Guram

Ответов: 3
Просмотров: 440
Последний ответ 23.07.2015, 10:17:37
от darkghost
Bootstrap шрифт

Автор a.tarasenko

Ответов: 0
Просмотров: 493
Последний ответ 12.03.2014, 01:09:38
от a.tarasenko
Bootstrap 3 и IE8 отображается как в мобилке

Автор wfedin

Ответов: 1
Просмотров: 1145
Последний ответ 09.03.2014, 22:04:59
от wfedin
Изменение стиля кнопки Bootstrap

Автор leito

Ответов: 4
Просмотров: 2220
Последний ответ 26.07.2013, 23:37:44
от Valerko_O