bootstrap row-fluid和圖像網格

我打算構建一個圖像庫大拇指。頁面中可能會有5到15個大拇指。bootstrap row-fluid和圖像網格

我的標記是這樣的：

<div class="container> 
    <div class="row-fluid"> 
     <h4 class="underline"><span>Recent images</span></h4> 

     <div id="portfolio" class="row-fluid"> 
      <div class="span3"> 
       <img src="img/portfolio/1.jpg"> 
      </div> 
      <div class="span3"> 
       <img src="img/portfolio/2.jpg"> 
      </div>  
      <div class="span3"> 
       <img src="img/portfolio/3.jpg"> 
      </div>  
      <div class="span3"> 
       <img src="img/portfolio/4.jpg"> 
      </div>  
      <div class="span3"> 
       <img src="img/portfolio/5.jpg"> 
      </div>  
      <div class="span3"> 
       <img src="img/portfolio/6.jpg"> 
      </div>  
      <div class="span3"> 
       <img src="img/portfolio/7.jpg"> 
      </div>  
      ... 
     </div> 
    </div> 
</div>

miss aligned thumbs

這不是工作，因爲引導僅從first-child取出margin-left。

我知道！我只需要將span3的4個元素放在row中，但是問題是：如何處理拇指來自PHP腳本的情況，並且有4個以上的拇指？

我是否應該爲每個4個元素重新迭代，並製作另一個行流體容器？

我很困惑。

來源

2012-12-20 Alireza

是的，你的PHP代碼需要產生HTML封閉一行，並開始一個新行，每12「跨越」：

<div class="container> 
    <div class="row-fluid"> 
     <h4 class="underline"><span>Recent images</span></h4> 

     <div id="portfolio"> 
      <div class="row-fluid"> 
      <div class="span3"> 
        <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQSlkfizo8Zj0MGNAt2p9g4JFnjOT4017-sR0Cjodujh5Yqb8JJ"> 
      </div> 
      <div class="span3"> 
        <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQSlkfizo8Zj0MGNAt2p9g4JFnjOT4017-sR0Cjodujh5Yqb8JJ"> 
      </div>  
      <div class="span3"> 
        <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQSlkfizo8Zj0MGNAt2p9g4JFnjOT4017-sR0Cjodujh5Yqb8JJ"> 
      </div>  
      <div class="span3"> 
        <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQSlkfizo8Zj0MGNAt2p9g4JFnjOT4017-sR0Cjodujh5Yqb8JJ"> 
      </div>  
      </div> 
      <div class="row-fluid"> 
      <div class="span3"> 
        <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQSlkfizo8Zj0MGNAt2p9g4JFnjOT4017-sR0Cjodujh5Yqb8JJ"> 
      </div>  
      <div class="span3"> 
        <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQSlkfizo8Zj0MGNAt2p9g4JFnjOT4017-sR0Cjodujh5Yqb8JJ"> 
      </div>  
      <div class="span3"> 
        <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQSlkfizo8Zj0MGNAt2p9g4JFnjOT4017-sR0Cjodujh5Yqb8JJ"> 
      </div> 
      </div> 
     </div> 
    </div> 
</div>

對的側方比較見http://jsfiddle.net/jhfrench/sSAx2/您代碼和我的。您會注意到我也將<div id="portfolio" class="row-fluid">分成了<div id="portfolio">和<div class="row-fluid">，因此#portfolio將成爲一行或多行圖像的容器。

來源

2013-01-08 19:04:43

此外，檢查引導的縮略圖（http://twitter.github.com/bootstrap/components.html#thumbnails），你可能想使用組織您的圖像。 –

對我來說，使用span3類在同一div內的圖像工作。
最近的圖片

<div id="portfolio"> 
<div class="row-fluid"> 
<div class="span3"> 
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQSlkfizo8Zj0MGNAt2p9g4JFnjOT4017-sR0Cjodujh5Yqb8JJ"> 
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQSlkfizo8Zj0MGNAt2p9g4JFnjOT4017-sR0Cjodujh5Yqb8JJ"> 
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQSlkfizo8Zj0MGNAt2p9g4JFnjOT4017-sR0Cjodujh5Yqb8JJ"> 
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQSlkfizo8Zj0MGNAt2p9g4JFnjOT4017-sR0Cjodujh5Yqb8JJ"> 
</div> 
</div> 
<div class="row-fluid"> 
<div class="span3"> 
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQSlkfizo8Zj0MGNAt2p9g4JFnjOT4017-sR0Cjodujh5Yqb8JJ"> 
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQSlkfizo8Zj0MGNAt2p9g4JFnjOT4017-sR0Cjodujh5Yqb8JJ"> 
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQSlkfizo8Zj0MGNAt2p9g4JFnjOT4017-sR0Cjodujh5Yqb8JJ"> 
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQSlkfizo8Zj0MGNAt2p9g4JFnjOT4017-sR0Cjodujh5Yqb8JJ"> 
</div>  

</div> 
</div> 
</div> 
</div>

來源

2014-02-19 19:45:25 Sibish

bootstrap row-fluid和圖像網格

回答

相關問題