Question

我正在尝试使用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。

Answer 1

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

Answer 2

使用row代替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

使用Twitter Bootstrap创建图库

2 个答案: