将 bootstrap div 彼此对齐

Question

您好，感谢您阅读本文 post。

我使用主要 bootstrap 和一些自定义设置 css

Link 到 Image

如您所见，在某些 post 之间有一个巨大的 space，我想知道如何将每个博客的容器“推”起来，使其看起来不错

类似于this.

Css

.blog-post-holder .well {
background-color: #ffffff;
text-align: center
}

.blog-post-holder .well img {
    width: 90%;
}

.blog-post-holder .well hr {
    border: 1px solid #dbdbdb
}

Html

<div class="blog-post-holder">
            <div class="col-lg-3">
                <div class="well">dwadwada<br />wdewad</div>
            </div>
            <div class="col-lg-3">
                <div class="well">
                    <img src="http://www.verticalresponse.com/blog/wp-content/uploads/2013/02/blogimg1-620x350.jpg" />
                    <hr />
                    dwadwada<br />wdewad
                </div>
            </div>
            <div class="col-lg-3">
                <div class="well">dwadwada<br />wdewad</div>
            </div>
            <div class="col-lg-3">
                <div class="well">
                    <img src="http://www.verticalresponse.com/blog/wp-content/uploads/2013/02/blogimg1-620x350.jpg" />
                    <hr />
                    dwadwada<br />wdewad
                </div>
            </div>
            <div class="col-lg-3">
                <div class="well">
                    <img src="http://www.verticalresponse.com/blog/wp-content/uploads/2013/02/blogimg1-620x350.jpg" />
                    <hr />
                    dwadwada<br />wdewad
                </div>
            </div>
            <div class="col-lg-3">
                <div class="well">dwadwada<br />wdewad</div>
            </div>
            <div class="col-lg-3">
                <div class="well">dwadwada<br />wdewad</div>
            </div>
            <div class="col-lg-3">
                <div class="well">
                    <img src="http://www.verticalresponse.com/blog/wp-content/uploads/2013/02/blogimg1-620x350.jpg" />
                    <hr />
                    dwadwada<br />wdewad
                </div>
            </div>
        </div>

我已经尝试了几个小时了，但我有点不知道如何做到这一点。我会接受任何类型的帮助：jquery、插件、css 或其他任何东西。

感谢您的宝贵时间和帮助。

Answer 1

尝试使用 gridalicious 实现此布局

http://suprb.com/apps/gridalicious/

Answer 2

您必须使用一些可用的 JQuery 插件，例如：wookmark, Blocklist.。使用该插件，您可以轻松安排您想要的内容。

masonry 是另一个实现这一目标的方法。

Answer 3

您可以为内部 div 应用内联显示样式，但这不是一个合适的解决方案。如果您被严格限制使用 css 试试这个：

.blog-post-holder > div {
  display: inline;
}

否则使用上面建议的 jQuery 插件。我更喜欢 masonry，因为它更容易使用。

将 bootstrap div 彼此对齐

Align bootstrap div below each other

html

css

jquery

blogs