bootstrap 类似 tumblr 的网格系统答案

【问题标题】：bootstrap tumblr-like grid systembootstrap 类似 tumblr 的网格系统
【发布时间】：2014-01-25 19:05:44
【问题描述】：

我想为我的引导网站设置一个类似 tumblr 的网格布局。 (example) 下面的代码显示了我现在使用引导程序的网格系统所拥有的东西（我的猜测是它不是为了做这样的事情而设计的）。可惜有些不排队。

<article class="col-md-6">
    <blockquote class="panel panel-default">
        <div class="panel-body">

            <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean odio turpis, elementum ut 
            fermentum nec, pulvinar in lectus. Suspendisse potenti. Cras quis sem sit amet lectus consectetur
            venenatis. Donec aliquam leovenenatis. Donec aliquam leo mi, vel fringilla purus commodo eget. Vivamus sit amet sapien sed
            mauris sodales ultrices vitae eget nisl. Nulla malesuada rhoncus mauris. Praesent vestibulum 
            auctor lorem mollis ornare.venenatis. Donec aliquam leo mi, vel fringilla purus commodo eget. Vivamus sit amet sapien sed 
            mauris sodales ultrices vitae eget nisl. Nulla malesuada rhoncus mauris. Praesent vestibulum 
            auctor lorem mollis ornare. mi, vel fringilla purus commodo eget. Vivamus sit amet sapien sed 
            mauris sodales ultrices vitae eget nisl. Nulla malesuada rhoncus mauris. Praesent vestibulum 
            auctor lorem mollis ornare.
            </p>
            <footer class="text-right">
            #1 — Maandag 20 januari 2014 — <cite>X</cite>
            </footer>

        </div>
    </blockquote>
</article>
<article class="col-md-6">
    <blockquote class="panel panel-default">
        <div class="panel-body">

            <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean odio turpis, elementum ut lor sit amet, consectetur adipiscing elit. Aenean odio turpis, elementum ut 
            fermentum nec, pulvinlor sit amet, consectetur adipiscing elit. Aenean odio turpis, elementum ut 
            fermentum nec, pulvinlor sit amet, consectetur adipiscing elit. Aenean odio turpis, elementum ut 
            fermentum nec, pulvin
            fermentum nec, pulvinar in lectus. Suspendisse potenti. Cras quis sem sit amet lectus consectetur
            venenatis. Donec 
            </p>
            <footer class="text-right">
            #1 — Maandag 20 januari 2014 — <cite>X</cite>
            </footer>

        </div>
    </blockquote>
</article>
    <article class="col-md-6">
    <blockquote class="panel panel-default">
        <div class="panel-body">

            <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean odio turpis, elementum ut 
            fermentum nec, pulvinar in lectus. Suspendisse potenti. Cras quis sem sit amet lectus consectetur
            venenatis. Donec um dolor sit amet, consectetur adipiscing elit. Aenean odio turpis, elementum ut 
            fermentum nec, pulvinar in lectus. Suspendisse potenti. Cras quis sem sit amet lectus consectetur
            venenatis. Donec 
            </p>
            <footer class="text-right">
            #1 — Maandag 20 januari 2014 — <cite>X</cite>
            </footer>

        </div>
    </blockquote>
</article>
    <article class="col-md-6">
    <blockquote class="panel panel-default">
        <div class="panel-body">

            <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean odio turpis, elementum ut 
            fermentum nec, pulvinar in lectus. Suspendisse potenti. Cras quis sem sit amet lectus consectetur
            venenatis. Donec 
            </p>
            <footer class="text-right">
            #1 — Maandag 20 januari 2014 — <cite>X</cite>
            </footer>

        </div>
    </blockquote>
</article>
<article class="col-md-6">
    <blockquote class="panel panel-default">
        <div class="panel-body">

            <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean odio turpis, elementum ut 
            fermentum nec, pulvinar in lectus. Suspendisse potenti. Cras quis sem sit amet lectus consectetur
            venenatis. Donec aliquam leo mi, vel fringilla purus commodo eget. Vivamus sit amet sapien sed 
            mauris sodales ultrices vitae eget nisl. Nulla malesuada rhoncus mauris. Praesent vestibulum 
            auctor lorem mollis ornare.venenatis. Donec aliquam leo mi, vel fringilla purus commodo eget. Vivamus sit amet sapien sed 
            mauris sodales ultrices vitae eget nisl. Nulla malesuada rhoncus mauris. Praesent vestibulum 
            auctor lorem mollis ornare.
            </p>
            <footer class="text-right">
            #1 — Maandag 20 januari 2014 — <cite>X</cite>
            </footer>

        </div>
    </blockquote>
</article>              
<article class="col-md-6">
    <blockquote class="panel panel-default">
        <div class="panel-body">

            <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean odio turpis, elementum ut 
            fermentum ne
            </p>
            <footer class="text-right">
            #1 — Maandag 20 januari 2014 — <cite>X</cite>
            </footer>

        </div>
    </blockquote>
</article>

JSfidle（由于响应式设计，您可能需要放大结果面板）

我想知道如何让所有列显示在上一个列的下一个或下一个，而不会出现像现在这样的巨大差距。

【问题讨论】：

如果我理解正确，你想去掉每个<article> 之间的边距对吗？
@DrydenLong Long 我想保留边距，但只保留 15px 的边距。如果您查看左侧的最后两个 <article>，它们的上方和下方都有一些奇怪的间距

标签： html css twitter-bootstrap twitter-bootstrap-3 grid-layout

【解决方案1】：

首先添加row 和col 的父层，并决定您想要多少列以获得最宽的屏幕分辨率（在本例中为2，因此我们使用col-md-6）。然后为每一列添加另一行，其中包含多列。

<div class="row">
    <div class="col-md-6">
        <div class="row>
             <article class=col-md-12>...</article>
             <article class=col-md-12>...</article>
             <article class=col-md-12>...</article>
        </div>
    </div>
    <div class="col-md-6">
        <div class="row>
             <article class=col-md-12>...</article>
             <article class=col-md-12>...</article>
             <article class=col-md-12>...</article>
        </div>
    </div>
</div>

因此，基本上您将子行用作父行的列。我希望这是有道理的。

我已经更新了你的jsfiddle

也供参考，here's the Bootstrap documentation 关于网格。

编辑： 如果你想像在 Tumblr 上那样做，那么你需要加载 Masonry。使用 Masonry，您的标记可以正常工作。

【讨论】：

这似乎有点乱序
我只是在做 jsfiddle 时随机复制粘贴的块。

【解决方案2】：

你可以试试这样的 CSS 网格解决方案..

.container.page {
 -moz-column-width: 39em;
 -webkit-column-width: 39em;
 -moz-column-gap: .75em;
 -webkit-column-gap: .75em;   
}

.col-sm-6 {
 display: inline-block;
 margin:  0.75rem;
 padding:  .5rem;
 width:  100%; 
 float:none;
}

演示：http://bootply.com/108441

或者，您可以使用 masonry 或 isotope 之类的 jquery 插件来完成此操作：http://bootply.com/99910

【讨论】：