Jquery 如何在行和列中显示图像？_Jquery_Html_Twitter Bootstrap

Jquery 如何在行和列中显示图像？

jquery html twitter-bootstrap

Jquery 如何在行和列中显示图像？,jquery,html,twitter-bootstrap,Jquery,Html,Twitter Bootstrap,我正在查询数据库中的一些图像，并将它们显示在网页上。但是，我希望将这些图像以行和列的形式显示为缩略图例如：如果c1、c2、c3、c4和c5为5列，r1、r2和r3为3行，则页面应显示15个图像缩略图我正在使用引导提前感谢您的帮助。我想这就是问题所在 <body> <div class="container-fluid"> <div class="hidden-phone"> </div> <

我正在查询数据库中的一些图像，并将它们显示在网页上。但是，我希望将这些图像以行和列的形式显示为缩略图

例如：

如果c1、c2、c3、c4和c5为5列，r1、r2和r3为3行，则页面应显示15个图像缩略图

我正在使用引导

提前感谢您的帮助。

我想这就是问题所在

<body>
    <div class="container-fluid">
      <div class="hidden-phone">
      </div>
      <div class="row-fluid">
        <div class="span12 well">

        <div class="row-fluid">
          <ul class="thumbnails">

            <li class="span4">
              <div class="thumbnail">
                <img src="http://placehold.it/320x200" alt="ALT NAME">
                <div class="caption">
                  <h3>Title</h3>


                  <p align="center">
                    <a href="#myModal" class="btn btn-primary btn-block" data-toggle="modal">View Image</a>
                  </p>
                </div>
              </div>
            </li> 
             <li class="span4">
              <div class="thumbnail">
                <img src="http://placehold.it/320x200" alt="ALT NAME">
                <div class="caption">
                  <h3>Title</h3>

                  <p align="center">
                    <a href="#myModal" class="btn btn-primary btn-block" data-toggle="modal">View Image</a>
                  </p>
                </div>
              </div>
            </li> 
             <li class="span4">
              <div class="thumbnail">
                <img src="http://placehold.it/320x200" alt="ALT NAME">
                <div class="caption">
                  <h3>Title</h3>
                  <p align="center">
                    <a href="#myModal" class="btn btn-primary btn-block" data-toggle="modal">View Image</a>
                  </p>
                </div>
              </div>
            </li> 
          </ul>
        </div>
          <div class="row-fluid">
          <ul class="thumbnails">

            <li class="span4">
              <div class="thumbnail">
                <img src="http://placehold.it/320x200" alt="ALT NAME">
                <div class="caption">
                  <h3>Title</h3>
                  <p align="center">
                    <a href="#myModal" class="btn btn-primary btn-block" data-toggle="modal">View Image</a>
                  </p>
                </div>
              </div>
            </li> 
             <li class="span4">
              <div class="thumbnail">
                <img src="http://placehold.it/320x200" alt="ALT NAME">
                <div class="caption">
                  <h3>Title</h3>
                  <p align="center">
                    <a href="#myModal" class="btn btn-primary btn-block" data-toggle="modal">View Image</a>
                  </p>
                </div>
              </div>
            </li> 
             <li class="span4">
              <div class="thumbnail">
                <img src="http://placehold.it/320x200" alt="ALT NAME">
                <div class="caption">
                  <h3>Title</h3>
                  <p align="center">
                    <a href="#myModal" class="btn btn-primary btn-block" data-toggle="modal">View Image</a>
                  </p>
                </div>
              </div>
            </li>
          </ul>
        </div>
    </div>
    </div>
    </div>

Fiddle:

您可以使用基本网格系统和

缩略图类来创建所需的结构
<div class="row">
      <div class="col-sm-3 col-md-2">
        <a href="#" class="thumbnail"><img src="http://placehold.it/120x150" /></a>
      </div>
      ...
</div>
<div class="row">
      <div class="col-sm-3 col-md-2">
        <a href="#" class="thumbnail"><img src="http://placehold.it/120x150" /></a>
      </div>
      ...
</div>
...


...
...
...

证明。可以根据要实现的布局选择网格类。的引导文档将帮助您加载。Nothing。我不知道如何开始。好的，这可能是一个好的开始是的。已搜索，但找不到问题的任何特定内容。
<div class="row">
      <div class="col-sm-3 col-md-2">
        <a href="#" class="thumbnail"><img src="http://placehold.it/120x150" /></a>
      </div>
      ...
</div>
<div class="row">
      <div class="col-sm-3 col-md-2">
        <a href="#" class="thumbnail"><img src="http://placehold.it/120x150" /></a>
      </div>
      ...
</div>
...