0

我试图让我的缩略图在一行内均匀分布。他们每个人都是一个span2，有一个240x240的图像，行是span12。所以当我有 6 个时，它看起来很完美。当我有 5 个时，它只会将最后 2 个跨度留空。我应该怎么做才能自动均匀地间隔 span2 缩略图，以便它以相等的间距占据整行？

添加代码：

 <div class="row-fluid">
  <ul class="thumbnails">
     <li class="span2">
       <a href="#edithotelModal" class="thumbnail" data-toggle="modal">
        <img src="http://placehold.it/240x240" alt="">
        <h3>Room 1</h3>
        <p> <%= Forgery(:lorem_ipsum).words(20) %></p>
         </a>
     </li>

     <li class="span2">
       <a href="#editroomtypeModal" class="thumbnail" data-toggle="modal">
       <img src="http://placehold.it/240x240" alt="">
       <h3>Room 2</h3>
       <p> <%= Forgery(:lorem_ipsum).words(20) %></p>
       </a>
     </li>

     <li class="span2">
        <a href="#editroomModal" class="thumbnail" data-toggle="modal">
        <img src="http://placehold.it/240x240" alt="">
        <h3>Room 3</h3>
        <p> <%= Forgery(:lorem_ipsum).words(20) %></p>
        </a>
     </li>

     <li class="span2">
        <a href="#managepricesModal" class="thumbnail" data-toggle="modal">
        <img src="http://placehold.it/240x240" alt="">
        <h3>Room 4</h3>
        <p> <%= Forgery(:lorem_ipsum).words(20) %></p>
        </a>
     </li>

     <li class="span2">
        <a href="#manageextrasModal" class="thumbnail" data-toggle="modal">
        <img src="http://placehold.it/240x240" alt="">
        <h3>Room 5</h3>
        <p> <%= Forgery(:lorem_ipsum).words(20) %></p>
        </a>
     </li>


</ul>
</div>
4

1 回答 1

0

如果您只使用“标准”引导程序，我认为这是不可能的，因为不同的跨度有自己的值。

您可以创建自己的课程 - 以满足特殊需求，但您必须计算百分比。

也许这是一个很好的阅读： 引导流体行宽

还有一个： http ://coding.smashingmagazine.com/2009/06/09/smart-fixes-for-fluid-layouts/

.my-span5 {
 width: // Should be 20% minus a few something
 margin-left: // do the calculations...
}

您还可以使用 javascript 来计算包含元素的宽度，并将其均匀地分配给您的元素 - 但您必须牢记边距！

于 2012-10-16T16:11:58.473 回答