imagen Alinear a la izquierda del texto en la misma línea - Twitter Bootstrap

Question

Actualmente tengo un título párrafo y una imagen a su derecha, en la misma línea:

<div class="paragraphs"> 
    <div class="row"> 
    <div class="span4"> 
     <div class="content-heading"><h3>Experience &nbsp </h3><img src="../site/img/success32.png"/></div> 
     <p>Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p> 
    </div> 
    </div> 
</div> 

Esto funciona bien - la cantidad de rumbo y la la imagen está en la misma línea. Sin embargo, cuando coloco la imagen antes del div del encabezado de contenido, ya no están en la misma línea. Esto es lo que quiero lograr, imagen y contenido encabezado, en la misma línea.

Answer 1

Puede utilizar flotante:

<div class="paragraphs"> 
    <div class="row"> 
    <div class="span4"> 
     <img style="float:left" src="../site/img/success32.png"/> 
     <div class="content-heading"><h3>Experience &nbsp </h3></div> 
     <p style="clear:both">Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p> 
    </div> 
    </div> 
</div> 

Si desea que el siguiente <p> a permanecer en la misma línea también, eliminar su

style="clear:both" 

pero entonces se debe añadir

<div style="clear:both"></div> 

después de él.

Answer 2

Utilización de clases de Twitter Bootstrap puede ser la mejor opción:

• pull-left hace que un elemento flotante a la izquierda
• clearfix permite que el elemento contiene elementos flotantes (si no se ha establecido a través de otra clase)

<div class="paragraphs"> 
    <div class="row"> 
    <div class="span4"> 
     <div class="clearfix content-heading"> 
      <img class="pull-left" src="../site/img/success32.png"/> 
      <h3>Experience &nbsp </h3> 
     </div> 
     <p>Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p> 
    </div> 
    </div> 
</div> 

Answer 3

Para Bootstrap 3.

<div class="paragraphs"> 
    <div class="row"> 
    <div class="col-md-4"> 
     <div class="content-heading clearfix media"> 
      <h3>Experience &nbsp </h3> 
      <img class="pull-left" src="../site/img/success32.png"/> 
     </div> 
     <p>Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p> 
    </div> 
    </div> 
</div> 

Answer 4

A partir de Bootstrap v3.3.0 puede utilizar .media-left y .media-body

<div class="media"> 
    <span class="media-left"> 
     <img src="../site/img/success32.png" alt="..."> 
    </span> 
    <div class="media-body"> 
     <h3 class="media-heading">Experience</h3> 
     ... 
    </div> 
</div> 

Documentación: https://getbootstrap.com/docs/3.3/components/#media

Answer 5

me gustaría utilizar la parrilla de Bootstrap para lograr el resultado deseado. La clase = "img-responsive" funciona bien. Algo así como:

<div class="container-fluid"> 
     <div class="row"> 
      <div class="col-md-3"><img src="./pictures/placeholder.jpg" class="img-responsive" alt="Some picture" width="410" height="307"></div> 
      <div class="col-md-9"><h1>Heading</h1><p>Your Information.</p></div> 
     </div> 
    </div> 

Answer 6

Uso columna de anidamiento

Para anidar su contenido con la red por defecto, añadir un nuevo .row y un conjunto de columnas * .col-SM- dentro de un .col-SM-existente * columna. Las filas anidadas deben incluir un conjunto de columnas que sumen 12 o menos (no es necesario que utilice las 12 columnas disponibles).

<div class="row"> 
 
    <div class="col-sm-9"> 
 
    Level 1: .col-sm-9 
 
    <div class="row"> 
 
     <div class="col-xs-8 col-sm-6"> 
 
     Level 2: .col-xs-8 .col-sm-6 
 
     </div> 
 
     <div class="col-xs-4 col-sm-6"> 
 
     Level 2: .col-xs-4 .col-sm-6 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>