引導佈局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

回答

相關問題