Question

我正试图让我的缩略图在一行内均匀分布。它们中的每一个都是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>

Answer 1

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

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

也许这是一个很好的阅读： bootstrap fluid row width

还有一个： 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计算包含的元素宽度，并将其均匀分布到您的元素中 - 但是您必须记住边距！

一行中的Bootstrap流体缩略图

1 个答案: