0

我正在使用引导程序的缩略图功能。我动态地显示它们。但我想连续显示四个缩略图。我怎样才能做到这一点？？？这是代码。这会在另一个下方显示缩略图。但我要连续四个。我动态地创建缩略图。我对 Bootstrap 很陌生。

    {% for obj in q2 %}

{{q2.count}}
{{forloop.counter}}
        <tr>
            <td>

<div class="row-fluid">
    <div class="span12">
        <!-- <div class="span4"> -->
<ul  class="thumbnails">
  <li class="span4">
<br>
<br>

    <div  class="thumbnail" style="width:425%;margin-left:20px;height:420px" >
      <img  data-src="holder.js/300x200" alt="">
      <p> <b> {{obj.op_title}} </b></p>     
     <p><i class="icon-ok-circle"></i> <span class="label label-success">{{obj.op_status}}</span></p>
          <p><i class=" icon-user"></i> {{obj.op_positions}} Vacancies</p>
          <p><i class=" icon-map-marker"></i> {{obj.op_location}}</p>
<p><i class="icon-tasks icon-blue"></i> {{obj.op_qualification}} </p>
<p> <i class="icon-star icon-blue"></i> {{obj.op_experience}} Years </p>


<p><i class="icon-calendar icon-blue"></i> {{obj.op_effective_from.day}}-{{obj.op_effective_from.month}}-{{obj.op_effective_from.year}} - {{obj.op_effective_to.day}}-{{obj.op_effective_to.month}}-{{obj.op_effective_to.year}} </p>
<div class="accordion" id="accordion2">
  <div class="accordion-group">



     <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#{{obj.op_id}}">
  <i class="icon-book"></i>      Job Description
      </a>
    </div>

    <div id="{{obj.op_id}}" class="accordion-body collapse ">
      <div class="accordion-inner">
     {{obj.op_desc}}
      </div>
    </div>
</div>
 <div class="accordion-group">
    <div class="accordion-heading">

      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#{{obj.op_test_type}}">
       Skills Required
      </a>
    </div>
    <div id="{{obj.op_test_type}}" class="accordion-body collapse">
      <div class="accordion-inner">
       {{obj.op_skill_required}}
      </div>

    </div>

</div>


 <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#{{obj.op_experience}}">
       Skills Preferred
      </a>
    </div>
    <div id="{{obj.op_experience}}" class="accordion-body collapse">
      <div class="accordion-inner">
 {{obj.op_skill_preferred}}
      </div>
    </div>
</div>

<div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#{{obj.op_desc}}">
       Selection Criteria
      </a>
    </div>
    <div id="{{obj.op_desc}}" class="accordion-body collapse">
      <div class="accordion-inner">
    {{obj.op_selection_criteria}}
      </div>
    </div>
  </div>
  <br>


  <div>
      <a class="btn btn-primary" href="{% url editRow  obj.op_id  %}">Edit</a>
<a class="btn" onclick="return confirm('Are you sure want to delete this Opening!!!!');"  href="{% url deleteRow  obj.op_id  %}">Delete</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>





{% endfor %}
</td>
</tr>
4

2 回答 2

0

在引导文档http://twitter.github.io/bootstrap/components.html#thumbnails之后，您可以使用网格列大小显示这样的缩略图.span3。

在这里你可以摆弄示例http://jsfiddle.net/GgSRN/1/

您动态添加的项目应具有如下代码：

<li class="span3">
    <a href="#" class="thumbnail">
        <img src="myimg" alt="myimg">
    </a>
</li>

在每四行之后，您必须结束您的列表并开始新的：

</ul>
<ul class="thumbnails">

希望有帮助！

于 2013-04-08T12:50:36.217 回答
0

在你的 css 中给图像一个宽度；例子

#divname img
{
 width:148px;(the size you want )
 height:120px;
}

现在图像的大小始终为 150x120

然后设置浮动：左；

图像将依次加载。你可以设置

#divname img
{
 width:148px;(the size you want )
 height:120px;    
 margin-top:2px;
 margin-right:1px;
 margin-left:1px;
}

所以图像之间有一个小空间。

如果他们所在的 div 为 600 px，则将有 4 张图像。您可以通过 (img incl border 150px) 600/150=4 图像计算

我希望这是您正在寻找的答案，因为问题不是很清楚。

于 2013-04-08T12:46:59.107 回答