如何使用引导程序在缩略图网格视图中显示结果，如 pininterest答案

【问题标题】：how to show the result in thumbnail gridview like pininterest using bootstrap如何使用引导程序在缩略图网格视图中显示结果，如 pininterest
【发布时间】：2014-03-18 01:17:05
【问题描述】：

如何在我的网页中显示结果，如 pininterest 缩略图网格视图和动态列和行创建？

下面的代码显示缩略图，但所有结果都在不同的行中，使页面太长，我希望他们使用整页并在需要时滚动。

     <div id="resultBox" class="span6">

<!--<div class="container">-->
    <div class="row-fluid">
         <ul ng-repeat="place in allresultsfinal.placeList" class="thumbnails">
            <li class="span4">
                <div class="thumbnail" style="padding: 0">
                    <div style="padding:4px">
                        <img alt="300x200" style="width: 100%" src="/ngdemo/img/hotelDemo.JPG">
                    </div>
                    <div class="caption">
                        <h2><b>{{ place.name }}</b></h2>
                        <p>Company description</p>
                        <p><i class="icon icon-map-marker"></i> {{ place.formattedAddress }} </p>
                    </div>
                    <div class="modal-footer" style="text-align: left">
                        <div class="progress">
                            <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                                <span class="sr-only">Pros:</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4"><b>05 KM</b><br/><small>Distance</small></div>
                            <div class="col-md-4"><b>4</b><br/><small>Rating</small></div>
                            <div class="col-md-4"><b>28</b><br/><small>Reviews</small></div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>

【问题讨论】：

我认为你应该在缩略图中调整类。模态页脚可能不应该在那里。 getbootstrap.com/components/#thumbnails
在这里查看我的答案：stackoverflow.com/questions/19504755/…

标签： twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

给你

HTML

<div class="row">
  <div class="col-lg-12 gallery">
    <img src="http://placekitten.com/200/300" />
    <img src="http://placekitten.com/200/300" />
    <img src="http://placekitten.com/200/300" />
    <img src="http://placekitten.com/200/300" />
    <img src="http://placekitten.com/200/300" />
    <img src="http://placekitten.com/200/300" />
    <img src="http://placekitten.com/200/300" />
    <img src="http://placekitten.com/200/300" />
    <img src="http://placekitten.com/200/300" />
    <img src="http://placekitten.com/200/300" />
    <img src="http://placekitten.com/200/300" />
    <img src="http://placekitten.com/200/300" />
  </div>
</div>

CSS

.gallery img {
  padding: 10px;
}

jsfiddle：http://jsfiddle.net/N7mYY/

【讨论】：