Bootstrap ile kahraman biriminde küçük resim nasıl görüntülenir?

Question

Bootstrap belgelerinin this page adresinde, tipik olarak bir sayfanın üst kısmına yerleştirilen ve önemli bir şey anlatan "kahraman birimi" ni gösteren bir örnek verilmiştir. Bunu bir sayfaya dahil etmeye çalışıyorum ama aynı zamanda onun yanında bir küçük resim de göstermek istiyorum. İşte ne var:

<div class="hero-unit"> 
    <div class="thumbnail span3"> 
    <img src="http://placehold.it/260x180" alt="Sample Image"> 
    </div> 
    <h1>Important Site Information</h1> 
    <p>This paragraph contains important ... </p> 
    <p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p> 
</div> 

Bu neredeyse eser ancak küçük resim ve metin arasında boşluk kalmayacak şekilde: Ayrıca

, görüntü hero-unit div taşan . Ben bazı satır içi stil hem sorunları çözebilirsiniz gerçekleştirmek:

<div class="hero-unit" style="overflow: auto;"> 
... 
<div class="thumbnail span3" style="margin-right: 20px;"> 

Ancak satır içi stil gerçekten ideal değildir ve ben bootstrap.css düzenleyerek site çapında uygulamak için kararsız. Daha iyi bir yolu var mı? Eminim birisi daha önce buna rastlamış.

Answer 1

Kılavuz öğeleri yuvalayabilirsiniz. Bu nedenle, kahraman biriminin içine başka bir <div class="row-fluid"> (veya <div class="row">) ekleyin ve ardından genel kılavuz sütun birimlerinin uygun yüzdesiyle iki <div class="span..."> blok ekleyin.

Resmi, sol sütuna ve sağdaki metinle koyun.