Twitter bootstrap Bootstrap&；砌体排水沟-响应

在过去的12个小时里，我一直在绞尽脑汁试图找到解决这个问题的方法，但我仍然没有做到这一点

我想为Massary itemSelector设置一个基于百分比的值（50%、33.333333%和25%，具体取决于我想要的列数-2、3或4），并且在项目之间有一个15px的边沟

我认为如果我想要4列，每列的宽度应该是25%减去15px（排水沟），但我就是想不出一个办法。我一定是脑子有问题

HTML

JS

下面是一个演示：

---

谢谢大家!

令人惊讶的是，我用自己糟糕的JS知识做到了这一点！虽然不漂亮，但它很管用

$(document).ready(function () {

    var columnCount = 4;
    var gutter = 15;

    $('.post').width(function() {
        return (((($('#content').width() - ((columnCount*gutter) - gutter)) / columnCount) / $('#content').width()) * 100)+'%';
    });

    $( window ).resize(function() {
        $('.post').width(function() {
            return (((($('#content').width() - ((columnCount*gutter) - gutter)) / columnCount) / $('#content').width()) * 100)+'%';
        });
    });
    var container = $('#content');

    container.masonry({

        itemSelector: '.post',
        gutter: gutter,

    });     
});

以下是工作演示：

article {
    background: #333;
    margin-bottom: 15px;
    height: 50px;
}
.post-columns {
    width: 25%;
    float: left;
}
.container {
    background: #dadada;
}

$(document).ready(function () {
    var container = $('#content');

    container.masonry({
        itemSelector: '.post',
        columnWidth: '.post-columns',
        gutter: 0
    }); 
});

$(document).ready(function () {

    var columnCount = 4;
    var gutter = 15;

    $('.post').width(function() {
        return (((($('#content').width() - ((columnCount*gutter) - gutter)) / columnCount) / $('#content').width()) * 100)+'%';
    });

    $( window ).resize(function() {
        $('.post').width(function() {
            return (((($('#content').width() - ((columnCount*gutter) - gutter)) / columnCount) / $('#content').width()) * 100)+'%';
        });
    });
    var container = $('#content');

    container.masonry({

        itemSelector: '.post',
        gutter: gutter,

    });     
});