¿Cómo mostrar una miniatura en la unidad héroe con Bootstrap?

Question

En this page de la documentación de Bootstrap, se proporciona un ejemplo que demuestra la "unidad de héroe" que normalmente se coloca en la parte superior de una página y anuncia algo importante. Intento incorporar esto en una página, pero también me gustaría mostrar una miniatura al lado. Aquí es lo que tengo:

<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> 

Este casi obras pero no hay ninguna brecha entre la imagen y el texto:

Además, la imagen está desbordando el div hero-unit . Soy consciente de que puedo solucionar ambos problemas con un poco de estilo en línea:

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

Sin embargo, línea estilo realmente no es ideal y yo soy reacio a aplicarlo en todo el sitio mediante la edición de bootstrap.css. ¿Hay una mejor manera? Estoy seguro de que alguien se ha topado con esto antes.

Answer 1

Puede anidar elementos de cuadrícula. Así que simplemente agregue otro <div class="row-fluid"> (o <div class="row">) dentro de la unidad héroe, y luego agregue dos bloques <div class="span..."> con el porcentaje apropiado de las unidades de columna de la cuadrícula general.

Coloque la imagen en la columna izquierda y el texto en la derecha.