Html 引导行和图像网格

我要建立一个图库拇指。页面中可能有5-15个拇指

我的标记是：

<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>

---

是的，您的PHP代码需要生成HTML，每12个“跨度”关闭一行，然后开始一行：

对于我来说，将图像放在与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>

此外，请查看Bootstrap的缩略图（），您可能希望使用它来组织图像。
<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>