引导行流体和图像网格

Question

我打算建立一个图像库拇指。页面中可能有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>

这不起作用，因为引导程序仅从margin-left中删除first-child。

我知道！我只需要在row中放入4个span3元素，但是 问题是如何处理拇指来自PHP脚本的情况，并且有超过4个拇指？

我是否应该为每个4个元素重新迭代，并制作另一个行 - 流体容器？

我很困惑。

Answer 1

是的，您的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成为一行或多行图片的容器。

Answer 2

对我来说，将相同div中的图像与span3类一起工作               最近的图片

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