Masonry и Bootstrap 3 — 3 столбца разного размера

Я боролся с Bootstrap и Masonry уже более 3-4 часов и перерыл кучу статей, но не смог найти решение.

Вот в чем дело:

У меня есть Bootstrap Grid, который выглядит так:

<div class="itemsContainer">
    <div class="col-md-6 item"></div>
    <div class="col-md-3 item"></div>
    <div class="col-md-3 item"></div>
</div>

Всего колонок 12 и без Masonry работает просто идеально. Но как только я включаю масонство, третья колонка выпадает.

Если я делаю 6-6 столбцов или 4-4-4 столбца и 3-3-3-3, они работают нормально, но 6-3-3 не работают.

У кого-нибудь есть решение для этого? Любые идеи, как иметь этот классный макет? Должен ли я реализовать свою плавающую сетку? Почему Masonry порвал с Bootstrap?

Это скрипт JS для иллюстрации https://jsfiddle.net/bePolite/52VtD/11921/embedded/result/


css twitter-bootstrap twitter-bootstrap-3 masonry jquery-masonry
person mrGott    schedule 25.05.2015    source источник

Ответы (2)


arrow_upward
0
arrow_downward

нужно включить <div class="row"> будет работать, как вы хотите...

<div class="row">
    <div class="itemsContainer">
        <div class="col-md-6 item"></div>
        <div class="col-md-3 item"></div>
        <div class="col-md-3 item"></div>
    </div>
</div>
person ccdiego5    schedule 25.05.2015
comment
попробую и дам знать. Я точно не помню, но, кажется, я тоже пробовал. - person mrGott; 25.05.2015
comment
Я только что попробовал это, но это не сработало, я даже добавил 2 div class = row, но все равно ничего. Он просто не может соответствовать третьему столбцу. Хотя места много. В любом случае спасибо за ваше время и совет! - person mrGott; 26.05.2015
comment
у меня есть это -› prntscr.com/79m8i5 я изменю, чтобы вы видели, как это работает... prntscr.com/79m8wt - person ccdiego5; 26.05.2015
comment
Теперь я вижу, что вы не догнали мой вопрос. Сам Bootstrap работает так, как задумано, даже без DIV CLASS=ROW, но я хочу реализовать именно MASONRY.JS. - person mrGott; 26.05.2015

arrow_upward
0
arrow_downward

Пример начальной загрузки

<div class="container">
    <h1>Divs with same col's</h1>
    <div class="row">
        <div class="col-xs-4 bg1"><p class="lead"> i'm div col-xs-4 </p></div>
        <div class="col-xs-4 bg2"><p class="lead"> i'm div col-xs-4 </p></div>
        <div class="col-xs-4 bg3"><p class="lead"> i'm div col-xs-4 </p></div>
    </div>
    <h1>Divs with differents col's</h1>
    <div class="row">
        <div class="col-xs-6 bg1"><p class="lead"> i'm div col-xs-6 </p></div>
        <div class="col-xs-3 bg2"><p class="lead"> i'm div col-xs-3 </p></div>
        <div class="col-xs-3 bg3"><p class="lead"> i'm div col-xs-3 </p></div>
    </div>
</div>

это покажет вам так:

введите здесь описание изображения

person ccdiego5    schedule 26.05.2015
comment
Да, только Bootstrap выровняет так, как я хочу, но в этом примере вы используете только bootstrap без Masonry.js, Shuffle.js или чего-то еще. Если вы посмотрите на мой вопрос, вы увидите, что я пытаюсь реализовать Masonry.js. - person mrGott; 26.05.2015
comment
В любом случае спасибо за ваше время! - person mrGott; 26.05.2015