Twitter bootstrap 如何将缩略图正确放置在选项卡内容中

我想用twitter引导创建一个ui布局。我想要实现的是有一个缩略图列表，它将是一个标签内的搜索结果。但除第一行外，其他行只有3项。我不擅长css。因此，请帮助实现这个布局

---

导航标头



















/
/
数据

烙印

项目类别

项目子类别

评级
项目条件

他有一个形象
出售人

关于搜索的一些事情








缩略标签

附件是截图

---

如果希望在span10中包含七个缩略图，则应在一行中包含三个.span3缩略图类，因为四个span3类构成了span12，而这些类不适合span10。因此，如果您遵循span10分区，请将三个span3类保持在一行

解决方案是，将三个缩略图包含到一个行div中，然后是另一个具有三个缩略图的行div，最后是一个包含一个缩略图的div

结构如下所示：

<!-- 3 thumbnail div's in first row-->
<div class="span10">
 ......
 <div class="row">
   <ul class="thumbnails">
      <li class="span3">
         <div class="thumbnail">
            <img ...>
            <div class="caption">
            <h3>Thumbnail label</h3>
            <p>
                 <a href="#" class="btn btn-primary">Action</a> 
                 <a href="#"class="btn">Action</a>
            </p>
         </div>
      </li>
      <li class="span3">
         ...
      </li>
      <li class="span3">
         ...
      </li>
    </ul>
</div>
<!-- followed by 3 thumbnail div's in second row -->
<div class="row">
   <ul class="thumbnails">
      <li class="span3">
         ...
      </li>
      <li class="span3">
         ...
      </li>
      <li class="span3">
         ...
      </li>
    </ul>
<!-- followed by 1 thumbnail div's in second row -->
<div class="row">
   <ul class="thumbnails">
      <li class="span3">
         ...
      </li>
    </ul>
 </div>
</div>

......


缩略标签




...


...




...


...


...




...

希望这有帮助

<!-- 3 thumbnail div's in first row-->
<div class="span10">
 ......
 <div class="row">
   <ul class="thumbnails">
      <li class="span3">
         <div class="thumbnail">
            <img ...>
            <div class="caption">
            <h3>Thumbnail label</h3>
            <p>
                 <a href="#" class="btn btn-primary">Action</a> 
                 <a href="#"class="btn">Action</a>
            </p>
         </div>
      </li>
      <li class="span3">
         ...
      </li>
      <li class="span3">
         ...
      </li>
    </ul>
</div>
<!-- followed by 3 thumbnail div's in second row -->
<div class="row">
   <ul class="thumbnails">
      <li class="span3">
         ...
      </li>
      <li class="span3">
         ...
      </li>
      <li class="span3">
         ...
      </li>
    </ul>
<!-- followed by 1 thumbnail div's in second row -->
<div class="row">
   <ul class="thumbnails">
      <li class="span3">
         ...
      </li>
    </ul>
 </div>
</div>