0

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

例如：

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

我正在使用引导程序。

提前感谢您的帮助。

4

2 回答 2

1

我想这就是它

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

CSS

ul.thumbnails li.span4:nth-child(3n + 4) {
  margin-left : 0px;
}

小提琴：http: //jsfiddle.net/Z3VwZ/11/

于 2013-11-14T09:43:32.650 回答
0

您可以使用基本的网格系统和thumbnail类来创建您想要的结构。

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

这是一个 JSFiddle来演示。您可以根据要实现的布局选择网格类。网格系统的 Bootstrap 文档将帮助您加载。

于 2013-11-14T09:46:29.583 回答