引导布局Coloumn

我有问题，建立与引导CSS布局，引导布局Coloumn

<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

任何人都可以帮我解决这个？？我需要做的布局这样的自举http://codepen.io/nouveau/pen/Litmp

CLOSE：

哦，我的错，对不起，都是我更换if ($i % 7 == 1 || $i == 1)到if ($i % 6 == 1)我歪曲nth-child(12n+1),nth-child(12n+7)它现在做工精细

来源

2014-10-16 Tiara Larasati

你想达到什么样的布局？ – 2014-10-16 09:56:35

请提及布局。 – 2014-10-16 11:25:00

您可以使用该示例中的确切代码，而不是该部分的引导类。 – Legin76 2014-10-16 12:09:54

有一对夫妇的可以使用的选项为了这。

首先是使用马赛克脚本（如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 -push-4。如果您引入其他尺寸，这可能会变得更加复杂。

来源

2014-10-16 11:32:57 Legin76

引导布局Coloumn

回答

相关问题