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

異なるスパンには独自の値があるため、「標準」のブートストラップのみを使用する場合、これが可能であるとは思いません。

特別なニーズに合わせて独自のクラスを作成することもできますが、パーセンテージを計算する必要があります。

多分これは良い読み物です： ブートストラップ流体行幅

そしてもう1つ： 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 に答える