使用bootstrap连续包装div

Question

动态创建div class="col-md-3"。并且我希望它们在创建四个div后包装。如果我删除任何div，我希望他们再次结束。

这可能吗？

<div class="row">
<div class="col-md-3" style="border:1px solid black; min-height:50px;">
    <div class="col-md-12">
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
        culpa qui officia deserunt mollit anim id est laborum."
    </div>
</div>
<div class="col-md-3" style="border:1px solid black; min-height:50px;"></div>
<div class="col-md-3" style="border:1px solid black; min-height:50px;"></div>
<div class="col-md-3" style="border:1px solid black; min-height:50px;">
        Duis aute irure dolor in
        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
        culpa qui officia deserunt mollit anim id est laborum."
</div>
<div class="col-md-3" style="border:1px solid black; min-height:50px;">
    This should be placed under the first 4 divs.
</div>

现在看起来很喜欢这个。这不是我想要的。

Answer 1

你可以借助bootstrap的行来实现它。首先，不需要给min-height：50px到div。其次，Boostrap基于12列网格，这意味着如果一行中的列总数延长12，那么新列将会下降。
对于     col-md-3 + col-md-9 = col-md-12或col-md-4 + col-md-4 + col-md-4 = col-md-12。

如果您希望列数不超过4列，则应编写：

col-md-3 + col-md-3 + col-md-3 + col-md-3 

这将形成一行。

您可以在此处进行实验：http://jsfiddle.net/johannesMt/he3fzkhn/

如果你想从行中删除某个div并让其他人替换它，那么你可以使用一个砌体jquery插件，它可以很好地与bootstrap配合使用。

可在此处找到很好的参考资料：

http://www.sitepoint.com/bootstrap-tabs-play-nice-with-masonry/

http://www.bootply.com/123353