Макет (количество row) для bootstrap

[riki]

привет, есть такой макет - один элемент , по высоте занимает две строки

Как в bootstrap 3 построить сетку - для этого случая.

Пока вижу такие варианты, либо 3 строки (row) , либо 4 строки.

Если 3 строки - то в ней первые пять элементов, но будут ли они тогда как на рисунке распологаться

 

Большой элемент - тут как то не вписываеться.

 

P.S.

Все меньшие одинаковы между собой - большой два - малых по ширене.
 

Edited July 29, 2015 by riki

[RodgerFox]

есть метод -offset- а есть -put- ... поиграйтесь. 

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

p.s. в решении нужен один роу, и тринадцать блоков

Edited July 29, 2015 by RodgerFox

[Jack_V]

Можно еще просто 2 колонки сделать.

[riki]

Можно еще просто 2 колонки сделать.

Если сделать две колонки - то будет ли при сжатии три малых блока в одной строке? будут либо 4 либо 2 .

Edited July 30, 2015 by riki

[Jack_V]

Я, конечно, вдоль и поперек сей фреймворк не изучал, но можно же (если сжатие - это уменьшение ширины экрана) для 4 размеров указать свой числитель в дроби ширины (.5 = 6/12).
В любом случае - всегда можно написать свой медиазапрос.

[riki]

есть метод -offset- а есть -put- ... поиграйтесь. 

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

p.s. в решении нужен один роу, и тринадцать блоков

пока сделал так - блоки стали как нужно,

большой блок в html структуре первый и у него поставлен -push-   то есть-- > (left:%),

а четырех (первых) малых -pull- то есть-- > (rigth :%)

Edited July 31, 2015 by riki

[RodgerFox]

.tete div {  height: 50px;  margin-bottom: 10px;  background: #fff;  border: 1px solid green;}.tete div.in {  height: 110px;  margin-bottom: 10px;}

<div class="container"><div class="row tete"><div class="col-md-3"></div><div class="col-md-3"></div><div class="col-md-6 pull-right in"></div><div class="col-md-3"></div><div class="col-md-3"></div><div class="col-md-3"></div><div class="col-md-3"></div><div class="col-md-3"></div><div class="col-md-3"></div></div></div>

запутал вас с пулом не много. ну сами ведь подумайте) один элемент и мы можем задать ему размеры (важна высота) и меняет флоут на противоположенную сторону, профит

Edited August 1, 2015 by RodgerFox

[riki]

 

.tete div {  height: 50px;  margin-bottom: 10px;  background: #fff;  border: 1px solid green;}.tete div.in {  height: 110px;  margin-bottom: 10px;}

<div class="container"><div class="row tete"><div class="col-md-3"></div><div class="col-md-3"></div><div class="col-md-6 pull-right in"></div><div class="col-md-3"></div><div class="col-md-3"></div><div class="col-md-3"></div><div class="col-md-3"></div><div class="col-md-3"></div><div class="col-md-3"></div></div></div>

запутал вас с пулом не много. ну сами ведь подумайте) один элемент и мы можем задать ему размеры (важна высота) и меняет флоут на противоположенную сторону, профит

 

RodgerFox

попробовал ваш вариант - так не работает - третий и четвертый малый блок  идут с новой линии, то есть после большого идет с новой строки.

 

И кстати зачем там "pull-right"

<div class="col-md-6 pull-right in"></div>

- если имелось ввиду что то такое  col-lg-pull-6 - то он никак тут не помогает.

 

Мой вариант не нравиться, также из-за того при уменьшении экрана до двух малых блоков -  меняться  порядок - большой блок становиться первым

Edited August 1, 2015 by riki

[RodgerFox]

у нас идут блоки, все имеют флоут лефт, каждый блок занимает одну четвертую часть родителя (по ширине), третьему блоку мы ставим ширину 1/2 что бы он занимал ширину двух блоков и выставляем равнение по правому краю (флоут райт), что бы следующие блоки шли с боку как и должны их высота в сумме с первыми (двумя) блокам должна быть равна высоте большого блока (третьего). единственная проблема следить за высотой этих блоков. конец. 

вы дали макет, под этот макет работает предложенный мною вариант, только надо разобраться с высотой. 

можно через инлайн блоки сделать или таблицей. 

 

 

попробовал ваш вариант - так не работает - третий и четвертый малый блок  идут с новой линии, то есть после большого идет с новой строки.

Не может такого быть, мы оба используем сетку бутстрапа? сол-мб-блаблабла дает флоут по левому краю, обратите внимание на высоту большого блока и маленьких, прочитайте как работает флоут. 
 

Edited August 1, 2015 by RodgerFox

[riki]

вы дали макет, под этот макет работает предложенный мною вариант, только надо разобраться с высотой. /....

да вы правы,  за флоат просто забыл, если добавить флоат работает

.tete div.in {  height: 110px;  margin-bottom: 10px;  float: rigth;}

но большой блок все равно нужно ставить первый - так если сжать до 3 малых блоков - то в первой строке есть пустое место

[RodgerFox]

 

вы дали макет, под этот макет работает предложенный мною вариант, только надо разобраться с высотой. /....

да вы правы,  за флоат просто забыл, если добавить флоат работает

.tete div.in {  height: 110px;  margin-bottom: 10px;  float: rigth;}

но большой блок все равно нужно ставить первый - так если сжать до 3 малых блоков - то в первой строке есть пустое место

 

А тут работает моё сообщение "следите за высотой большого блока", само собой ею надо будет манипулировать. И в зависимости от ширины родителя так же. Но лучший метод не подскажу, все зависит от контента в блоках.