создание галереи изображений с помощью Twitter Bootstrap

Я пытаюсь создать очень простую и базовую галерею изображений, используя щебетать в стиле Bootstrap.создание галереи изображений с помощью 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.

источник

2013-07-25 Ramaraju.d

Используйте 'row' вместо' строки-fluid' (http://bootply.com/69509) – ZimSystem

Отлично это прекрасно. Большое спасибо –

Используйте 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

источник

2013-07-25 14:07:45 ZimSystem

Вы пытались добавить новый <div class="row-fluid"> ... </div> каждые четыре изображения?

источник

2013-07-25 13:39:40 Pascamel

Да, но я стараюсь, чтобы это было просто. Также данные приводятся из базы данных, поэтому она будет динамичной –

создание галереи изображений с помощью Twitter Bootstrap

ответ

Смежные вопросы