Question

使用bootstrap css构建布局时遇到问题，

<style>
.item {
    background-color: #fff;
    -webkit-box-shadow: 0 0 5px 0 #e2e3e4;
    -moz-box-shadow: 0 0 5px 0 #e2e3e4;
    box-shadow: 0 0 5px 0 #e2e3e4;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    padding: 10px;
}

.item img{
    max-width: 100%;
    min-width: 100%;
    height: 100%;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

#timeline {
    margin: 15px 0;
}
</style>
<div class="container-fluid">
    <div class="row">
        <?php
            for ($i = 1; $i < 15; $i++) {
                if ($i % 7 == 1 || $i == 1) {
                    echo '<div id="timeline" class="col-md-8">';
                } else {
                    echo '<div id="timeline" class="col-md-4">';
                }
        ?>
                <div class="item">
                    <img class="lazy img-responsive" src="http://420placehold.it/art/300-300-<?php echo $i; ?>">
                </div>
            </div>
        <?php } ?>
    </div>
</div>

7的每个倍数我使用大图像，但我有像这样的空白http://i57.tinypic.com/x35pg2.png

任何人都可以帮我解决这个问题？我需要使用bootstrap http://codepen.io/nouveau/pen/Litmp

进行这样的布局

关闭：

哦，我的错误，抱歉我将if ($i % 7 == 1 || $i == 1)替换为if ($i % 6 == 1)我误传了nth-child(12n+1),nth-child(12n+7)它的工作现在正常

Answer 1

您可以使用几个选项。

首先使用马赛克脚本（例如http://desandro.github.io/masonry/）使所有内容自动排列以适应。

第二个是在第8和第9列以及第22和第23列使用列排序（http://getbootstrap.com/css/#grid-column-ordering）等。因此使用col-md-4 col-md-pull-8和col-md-8 COL-MD-推-4。如果你引入其他尺寸，这可能会变得更复杂。

Bootstrap布局列

1 个答案: