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，或者，
如果 <div class="row"> 是偶数（i）则输出内部起始行i % 2 == 0，当 </div>时输出结束行i 是奇数（i % 2 == 1）。

Bootstrap 3多列动态块循环

1 个答案: