Involucro di testo attorno a un'immagine su bootstrap 3

Question

Ho trovato un problema con il testo attorno alla mia immagine sulla mia colonna. Ho un modello che sta eseguendo più pagine. alcune delle immagini non sono abbastanza lunghe quindi non sarà in grado su tutta la colonna ... Mi rendo conto che sono in 2 div diverse ma se qualcuno ha una soluzione a questo per favore fatemelo sapere.

Se andate a leggere e vedere qual è il problema, si vedrà il suo non è un duplicato ....

ecco quello che il mio codice è simile

<div class="row" data-sf-element="Row"> 
    <div id="contentPlaceholder_C002_Col00" class="sf_colsIn col-md-6" data-sf-element="Column 1"> 
    <div> 
     <div> 
     <h2>Contrary to popular belief, Lorem Ipsum is not simply r</h2> 
     <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during th</p> 
     <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during th</p> 
     </div> 
    </div> 
    </div> 
    <div id="contentPlaceholder_C002_Col01" class="col-md-6" data-sf-element="Column 2"> <img src="/images/default-source/careers/careers_1.jpg?sfvrsn=2" title="careers_1" alt="careers_1"> </div> 
</div> 

Answer 1

Quando si utilizza 2 colonne il testo verrà mai avvolgere l'immagine.

Si dovrebbe mettere l'immagine e il testo in una colonna e dargli pieno con. Quindi avvolgi il testo e l'immagine in un div e spostali a sinistra. Qualcosa nella linea di questa (codice è un esempio e non testato):

<div class="col-md-12"> 
    <div class="pull-left"><img src="YourImage.png"/></div> 
    <div class="pull-left">Your text goes here......</div> 
</div> 

Potrebbe essere necessario un certo margine sull'immagine modo che il testo non si attacca a chiudere all'immagine

Answer 2

Questo funziona per me.

<div class="col-md-12"> 
<img src="img/image.jpg" class="pull-left"> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste molestiae aliquam optio mollitia, unde quas eaque voluptatem dignissimos eos maiores magni reprehenderit nisi, corrupti nemo hic id cum quasi officiis!</p> 
</div> 

Answer 3

Ma se si desidera il vostro testo e immagine fianco a fianco, allora questo vi aiuterà.

<div class="row"> 
<p class="col-md-8">Text goes here....</p> 
<img class="img-circle col-md-4" src="image goes here..." alt="image text"> 
</div> 

Answer 4

Ho 2 colonne in questa pagina, ognuna con un testo immagine avvolto, un titolo, sottotitolo, testo e collegamento. Annido l'immagine nella sua colonna all'interno della colonna di testo per avvolgere il testo. Questo codice viene convertito in larghezza della colonna completa quando viene visualizzato sul dispositivo mobile. Sono sicuro che potresti tirare a destra se vuoi, ma questo funziona per me. Vedi codice in azione al http://www.lbch.org/_Employment.html.

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-12">Page Head Title & Text</div> 
    <div class="col-xs-12 col-md-6"> 
     <div class="col-xs-12 col-md-5"> 
     <img src="image" class="img-responsive" alt=""/> <br> 
     </div> 
     <div class="text-left"> 
     <h4 class="text-center"> 
      <strong>Article Title</strong><br> 
      <small>Article sub-title</small> 
     </h4> 
     <p>Text</p> 
     <p><a href="link">link text</a><strong> </p> 
     </div> 
    </div> 
    <div class="col-xs-12 col-md-6"> 
     <div class="col-xs-12 col-md-5"> 
     <img src="image" class="img-responsive" alt=""/> <br> 
     </div> 
     <div class="text-left"> 
     <h4 class="text-center"> 
      <strong>Article Title</strong><br> 
      <small>Article sub-title</small> 
     </h4> 
     <p>Text</p> 
     <p><a href="link">link text</a><strong> </p> 
     </div> 
    </div> 
    </div> <!--row--> 
</div> <!--container-->