自举网格系统推箱子/流体网格

Question

//抱歉我的英文不好

我有一个带产品包装盒的网站，我想让这些盒子垂直相互推动，这是一个带引导程序的流畅网格页面。

  

注意：我的bootstrap css包含 24 列而非 12 ！

源代码：

HTML：

<div class="container">
<div class="row">
    <div class="col-sm-12 col-md-6">
        <div class="box">
            <img src="2.jpg" class="img-thumbnail">
            <h2>Title</h2>
            <p>Some text</p>
            <span>item price</span>
        </div>
    </div>
    <div class="col-sm-12 col-md-6">
        <div class="box">
            <img src="3.jpg" class="img-thumbnail">
            <h2>Title</h2>
            <p>Some text</p>
            <span>item price</span>
        </div>
    </div>
    <div class="col-sm-12 col-md-6">
        <div class="box">
            <img src="4.jpg" class="img-thumbnail">
            <h2>Title</h2>
            <p>Some text</p>
            <span>item price</span>
        </div>
    </div>
    <div class="col-sm-12 col-md-6">
        <div class="box">
            <img src="5.jpg" class="img-thumbnail">
            <h2>Title</h2>
            <p>Some text</p>
            <span>item price</span>
        </div>
    </div>
    <div class="col-sm-12 col-md-6">
        <div class="box">
            <img src="6.jpg" class="img-thumbnail">
            <h2>Title</h2>
            <p>Some text</p>
            <span>item price</span>
        </div>
    </div>
    <div class="col-sm-12 col-md-6">
        <div class="box">
            <img src="7.jpg" class="img-thumbnail">
            <h2>Title</h2>
            <p>Some text</p>
            <span>item price</span>
        </div>
    </div>
    <div class="col-sm-12 col-md-6">
        <div class="box">
            <img src="8.jpg" class="img-thumbnail">
            <h2>Title</h2>
            <p>Some text</p>
            <span>item price</span>
        </div>
    </div>
    <div class="col-sm-12 col-md-6">
        <div class="box">
            <img src="9.jpg" class="img-thumbnail">
            <h2>Title</h2>
            <p>Some text</p>
            <span>item price</span>
        </div>
    </div>
</div>

CSS：

.col-md-6:nth-child(4n+1){
    clear: left;
}

现在我的页面看起来像这样： http://i58.tinypic.com/2rcwsh4.png

我想要这样的事情： http://i60.tinypic.com/2vdie50.jpg

这可能吗？