2015-11-09 17 views
5

Bir satırda 12'den fazla sütun verebilecek veya vermeyebilecek aşağıdaki kod var. 12'den fazla sütun varsa nasıl güzel görünmesini sağlayabilirim?Twitter Bootstrap - Üst üste 12'den fazla sütun stilleri?

<div collapse="gpCollapse"> 
    <div ng-repeat="item in revealedCtrl.greatPersons" class="thumbnail col-md-3"> 
    <img ng-src="/images/useritems/{{item.greatperson.image}}" tooltip="{{item.greatperson.name}}"/> 

    <div class="caption"> 
     <h3 class="text-center">{{item.greatperson.name}}</h3> 

     <p class="text-justify"> 
     {{item.greatperson.description}} 
     </p> 
    </div> 
    </div> 
</div> 

enter image description here

+0

'Güzel görünün' genel bir terimdir. Daha spesifik olabilir misin? – George

+0

Özür dilerim, açıklayıcı olduğunu düşündüm. Görüntülerin sol kayan görüntülenmesi istiyorum. Yukarıdaki resimde, sağdaki iki görüntü görüyorsunuz, sonra en sonunda bir satırda tek başınıza son. Bana göre 2 sıraya sahip olması gerektiği gibi görünüyor. Biri 4 adet, diğeri ise 3 –

+0

ile Bu, esnek kutunun işe yarayacağı bir yere benziyor. Bootstrap ızgarası işlevselliği oldukça sınırlıdır. – Harangue

cevap

1

"Küçük resim" sınıfına sabit bir yükseklik tanımlayın.

+0

Bu yükseklik ne olmalıdır? –

+0

Teşekkürler. Bu en kolaydı. Bunu 320 piksele ayarlıyorum. –

1

düzeninizin güzel görünümlü kadar bitmiyor sebebi (.thumbnail kolon div'leri vermek

<div class="caption"> 

kullanımı css içinde özellikle kolon içeriğinin değişken yüksekliğidir)

position: relative; 
// to make space for absolutely positioned caption 
padding-bottom: 40px; 

ve .Caption

0.123.
position: absolute; 
bottom: 0px; 
+0

Bu neredeyse işe yaradı. Ancak, metin aniden resmin içinde. Aşağıdakilere bakın: http://bildr.no/view/R2g1YzNq –

+0

.thumbnail altındaki piksel miktarı ile oynamak için .caption yüksekliği için aynı miktarda piksel kullanın. Bu, kabın taşan metnine yol açabilir, ancak taşma kullanarak daha iyi görünmesini sağlayabilirsiniz: gizli veya metin taşması: elips vb. –

İlgili konular