Wrap Text um ein Bild auf Bootstrap 3

Question

Ich stieß auf ein Problem mit dem Umwickeln des Textes um mein Bild auf meiner Spalte. Ich habe eine Vorlage, die mehrere Seiten ausführt. einige der Bilder sind nicht lang genug, so dass es nicht über die gesamte Spalte hinweg möglich ist ... Ich weiß, dass sie in 2 verschiedenen Divs sind, aber wenn jemand eine Lösung dafür hat, lass es mich wissen.

Wenn Sie lesen und sehen, was das Problem ist, Sie es nicht ein Duplikat sehen werden ....

hier ist, was mein Code wie

<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

Bei der Verwendung von zwei Spalten der Text sieht niemals um das Bild gewickelt werden.

Sie sollten das Bild und den Text in eine Spalte und geben Sie es voll mit. Wickeln Sie dann den Text und das Bild in ein Div und schweben Sie sie nach links. Etwas in der Zeile dieser (Code ist ein Beispiel und nicht getestet):

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

Sie könnten einen gewissen Spielraum auf das Bild benötigen so dass der Text klebt nicht

Answer 2

Dies funktioniert für auf das Bild, um zu schließen mich.

<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

Aber wenn Sie Ihren Text und Bild nebeneinander wünschen, dann würde dies Ihnen helfen.

<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

Ich habe 2 Spalten auf dieser Seite, die jeweils mit einem Text-Bild eingewickelt, ein Titel, Untertitel, Text und Link. Ich verschachtele das Bild in einer eigenen Spalte innerhalb der Textspalte, um den Text zu umbrechen. Dieser Code wird bei der Anzeige auf Mobilgeräten in die volle Spaltenbreite konvertiert. Ich bin sicher, du könntest ziehen - richtig, wenn du willst, aber das funktioniert für mich. Siehe Code in Aktion unter 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-->