Bootstrap 3 多列动态块循环

Question

Bootstrap 默认设计为基于行的设计（水平），如下所示：

+------------+ +--+
| 1 | | |
| | | |
+------------+ | |
| 2 | | |
| | | |
+------------+ | |
| 3 | | |
| | | |
+------------+ | |
| 4 | | |
| | | |
+------------+ +--+

我可以通过执行以下操作轻松做到这一点：

<div class="container">
    <div class="row">
        <div class="col-md-10">
            <div class="row">
                <div class="col-md-12">POST</div>
                <div class="col-md-12">POST</div>
                <div class="col-md-12">POST</div>
            </div>
        </div>
        <div class="col-md-2">Sidebar</div>
    </div>
</div>

我可以在左侧区域内重复（动态循环）博文的数量。

但是如果我要执行类似下面的操作，所有博客文章都在两列的左侧，循环使布局垂直（不在 Bootstrap 的概念中）那我该怎么办？我该如何实施？

+-----+ +-----+ +--+
| 1 | | 2 | | |
| | | | | |
+-----+ +-----+ | |
| 3 | | 4 | | |
| | | | | |
+-----+ +-----+ | |
| 5 | | 6 | | |
| | | | | |
+-----+ +-----+ | |
| 7 | | 8 | | |
| | | | | |
+-----+ +-----+ +--+

我知道 HTML 是：

<div class="container">
    <div class="row">
        <div class="col-md-10">
            <div class="row">
                <div class="col-md-6">Left</div>
                <div class="col-md-6">Right</div>
            </div>
            <div class="row">
                <div class="col-md-6">Left</div>
                <div class="col-md-6">Right</div>
            </div>
        </div>
        <div class="col-md-2">Widget</div>
    </div>
</div>

但我对动态部分感到困惑。我可以猜到，它可以通过类似的方式实现：

<?php for( $i=0; $i<10; $i++ ) { ?>
    <?php if( $i==0 ) echo '<div class="row">'; ?>
        <div class="col-md-6"><?php echo 'post #'. $i; ?></div>
    <?php if( $i==2 ) echo '</div><!--/.row-->'; ?>
<?php } ?>

但这不是一个漫长的过程吗？如何使用 Bootstrap 3 实现这种垂直循环布局？

Answer 1

要么不输出这些内部的 .row，而是简单地使用 .col-md-6 而不是第一个示例中的 .col-md-12，
或者，
如果 i 是偶数 (i % 2 == 0) 则输出内部起始行 <div class="row"> 并且当 时输出结束行 </div> i 是奇数 (i % 2 == 1).

Bootstrap 3 多列动态块循环

Bootstrap 3 multi column dynamic block loop

html

css

php

wordpress

twitter-bootstrap