Как в Bootstrap-е сделать такую сетку?

Question

[Grizzy]

Т.е. inline-block :)

И допустим:
на десктопе - 3 колонке
на планшетах - 2 колонки
на мобильниках - 1 колонка

P.S. Я так понимаю, что никак. Или я что-то пропустил? Странно просто, что такой хваленый фреймворк не дает мне слепить такую ерунду.

Answer 1

[Григорий Васильков]

Ну сделай на нативном CSS.
inline-block, ширина, высота.
Размер шрифта родителя 0.
Размер шрифта блока 1rem.
Они будут переносится на новую строку при сжатии.

Бутстрап никогда не был "хорошим" фреймворком. Он всегда был "разрекламированным фреймворком".

Хорошее делается пальчиками и ручками, долго и дорого.

Comments

[Григорий Васильков]

пс. я думаю в твоем случае понадобится сделать обычную сетку 2 на 3, а внутри кинуть инлайн блоки

Answer 2

[Александр Таратин]

w3bits.com/css-masonry

Comments

[Grizzy]

Думаю излишне. Хочется просто перестраховаться от переполнения. Концепция "Пуленепробиваемого веб-дизайна" велит так. Мало ли. Может название товара будет слишком длинным...

Answer 3

[Mokhirjon Naimov]

Это?:

<div class="container">
	<div class="row">

		<div class="col-xs-12 col-sm-6 col-md-4">
			<p>Block #1</p>
		</div>

		<div class="col-xs-12 col-sm-6 col-md-4">
			<p>Block #2</p>
		</div>

		<div class="col-xs-12 col-sm-6 col-md-4">
			<p>Block #3</p>
		</div>

		<div class="col-xs-12 col-sm-6 col-md-4">
			<p>Block #4</p>
		</div>

		<div class="col-xs-12 col-sm-6 col-md-4">
			<p>Block #5</p>
		</div>

		<div class="col-xs-12 col-sm-6 col-md-4">
			<p>Block #6</p>
		</div>

	</div>
</div>

UPD:
sitepoint.com/bootstrap-tabs-play-nice-with-masonry/
bootply.com/120682
webdesign.tutsplus.com/tutorials/build-a-dynamic-grid-with-salvattore-and-bootstrap-in-10-minutes--cms-20410

P.S. Почему то ссылки по другому не показывались!

Comments

[Grizzy]

А вы попробуйте сделать блоки разной высоты :)

[Mokhirjon Naimov]

Grizzy Мдааа проблема :(...

[Сергей]

Может так

<div class="col-xs-12 col-sm-6 col-md-4">
      <div style="height: 100px;">Block #1</div>
    </div>

    <div class="col-xs-12 col-sm-6 col-md-4">
       <div style="height: 200px;">Block #2</div>
    </div>

[Grizzy]

Сергей: высота блока не известна.

[Сергей]

Grizzy: jsfiddle.net/34527mL0/3 не подходит?

[Grizzy]

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

[Grizzy]

Сергей: а нет понял) все ломается же:)

[Mokhirjon Naimov]

Grizzy вы мой update посмотрели?! подходит, нет?

[Grizzy]

Mokhirzon Naimov: нет :)