Question

如何在我的网页中显示结果，例如pininterest thumnail gridview和动态列和行创建？

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

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

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

如何使用bootstrap在pininterest中显示缩略图gridview中的结果

1 个答案: