Como exibir uma miniatura na unidade heroica com o Bootstrap?
Emesta págin da documentação do Bootstrap, é fornecido um exemplo demonstrando a "unidade heroica", que normalmente é colocada no topo de uma página e anuncia algo importante. Estou tentando incorporar isso em uma página, mas também gostaria de exibir uma miniatura ao lado. Aqui está o que eu tenho:
<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 »</a></p>
</div>
Estequas funciona, mas não há espaço entre a miniatura e o texto:
Além disso, a imagem está transbordando ohero-unit
div. Sei que posso corrigir os dois problemas com um estilo embutido:
<div class="hero-unit" style="overflow: auto;">
...
<div class="thumbnail span3" style="margin-right: 20px;">
Contudo estilo in-line não é o ideal e hesito em aplicá-lo em todo o site editandobootstrap.css
. Existe uma maneira melhor? Tenho certeza de que alguém já se deparou com isso antes.