0

我正在尝试使用 Twitter Bootstrap 响应式设计创建一个非常简单和基本的图片库。

图像是动态渲染的。第一行图​​像调整良好，但从第二行开始，对齐方式有所不同。

这是我的代码

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gallery</title> 
<link href="<?=base_url()?>assets/css/bootstrap.css" rel="stylesheet"> 
<link href="<?=base_url()?>assets/css/bootstrap-responsive.css" rel="stylesheet">
<style>

</style>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
    <div class = "span12">
    <?php
    for($i=0; $i<10 ;$i++)
    {
    ?>              
    <div class = "span3">
    <a href="#" class="thumbnail">
            <img src="https://www.gstatic.com/webp/gallery/4.sm.jpg" alt="sample" style = "border:solid 2px red;"/>
    </a>
    </div>

    <?php
    }
    ?>
    </div>                  
</div>
</div>


</body>
</html>

如何准确对齐跨度，使其看起来像一个完美的画廊状结构。

我不想在这里使用任何插件或 jQuery。

4

2 回答 2

1

您是否尝试<div class="row-fluid"> ... </div>每四个图像添加一个新图像？

于 2013-07-25T13:39:40.150 回答
1

使用 arow而不是row-fluid..

<div class="container">
    <div class="row">

    <div class="span3">
    <a href="#" class="thumbnail">
        <img src="https://www.gstatic.com/webp/gallery/4.sm.jpg" alt="sample" style="border:solid 2px red;">
    </a>
    </div>
   ...
    </div>
</div>

演示：http ://bootply.com/69509

于 2013-07-25T14:07:45.453 回答