Bootstrap3 - Textumbruch auf rechts ausgerichteten Bildern

Question

Ich benutze Bootstrap 3. Ich habe Text auf der linken Seite der Seite und ein Bild auf der rechten Seite. Ich versuche, den Text um ein Bild zu wickeln. Ich habe ein Beispiel dafür für linksbündige Bilder gesehen, aber ich kann anscheinend nicht das Gegenteil zur Arbeit bekommen.

Um den Fehler anzuzeigen, habe ich eine example on JSFiddle erstellt.

Es gibt einen TITEL, dann ein Banner, das sollte die halbe Seite sein. Das Hockeyspielerbild sollte rechts vom Banner sein und die Oberseiten der 2 Bilder sollten ausgerichtet sein, der Text sollte sofort unter dem Banner beginnen, dann unter das Hockeyspielerbild wickeln. Wie ein Zeitungslayout.

<div class="row"> 
    <div class="col-xs-12 col-sm-7"> 

     <h2>My Title</span></h2><!-- should be left aligned--> 

     <img src="/img/title_image.png" class="img-responsive"/><!--Should be left aligned--> 
    </div> 

    <div class="col-xs-12 col-sm-5 pull-right"> 
     <h2>&nbsp;</h2> 
      <img src="/image_on_right_text_to_wrap_around.png" class="img-responsive"/> 
    </div> 

    <div class="col-xs-12">  
     <!-- This text should be under the title image and wrap underneath the larger image on the right--> 
     <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum. 
     </p> 

     <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum. 
     </p> 

    </div> 

    <div class="col-xs-12"> 

MORE TEXT HERE 

Example Layout here

Answer 1

Ich habe gelöst mit mit Bootstrap-3, verhält es sich nun richtig:

https://jsfiddle.net/cec9086a/

<div class="container"> 
    <div class="jumbotron"> 
    <div class="row"> 
    <h2> 
    My Title 
    </h2> 
    </div> 

     <div class="row"> 
      <div class="col-xs-12 col-sm-6 pull-left"> 

     <img src="http://cliparts.co/cliparts/piq/rGa/piqrGaGyT.png" class="img-responsive"/> 

     </div> 

<div class="col-xs-12 col-sm-6 pull-right"> 
     <img src="http://www.legendsofhockey.net/LegendsOfHockey/members/splash/P197702S.jpg" class="img-responsive pull right"/> 

    </div> 

     <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum. 
     </p> 


      <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum. 
     </p> 

     <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum. 
     </p> 

     <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum. 
     </p> 

     <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum. 
     </p> 


     <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum. 
     </p> 

     </div> 


    </div> 



</div> 

Answer 2

Dies kann sein, was Sie wollen:

<div class="media"> 
    <div class="media-body"> 
    <h4 class="media-heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.</h4> 
    ... 
    </div> 
    <div class="media-left media-middle"> 
    <a href="#"> 
     <img class="media-object" src="..." alt="..."> 
    </a> 
    </div> 
</div> 

Answer 3

Ist das, was Sie wollen, ich habe paar divs und machte es sieht einfach aus, Sie haven‘? t hat Ihrem Kopfbild eine bestimmte Zeile hinzugefügt, weil beide Bilder inline gestapelt wurden. Und ich habe die Spalten divs geändert. CODEPEN exapmle

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="container-fluid"> 
 
<div class="row"> 
 
    <div class="row"> 
 
    <div class="col-xs-12 col-sm-7"> 
 

 
     <h2>My Title</span></h2><!-- should be left aligned--> 
 

 
     <img src="http://paradigmmedia.co.uk/wp-content/uploads/header-b88d930b520c523ef8a53abfb86d7523.png" class="img-responsive"/><!--Should be left aligned--> 
 
    </div> 
 
    </div> 
 
<div class="row"> 
 
    <div class="col-xs-5 col-sm-5 pull-right"> 
 
     
 
      <img src="https://lh3.googleusercontent.com/nhzkOTPaoWAYfO-LeklB_kPd5bAqm43D87Q3eHlK3alIse8rgrYPE74epbbbZ2b4EsY=w300" class="img-responsive"/> 
 
    </div> 
 

 
    <div class="col-xs-7">  
 
     <!-- This text should be under the title image and wrap underneath the larger image on the right--> 
 
     <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum. 
 
     </p> 
 

 
     <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum. 
 
     </p> 
 
    </div> 
 
    </div> 
 
</div> 
 
</div> 
 

Answer 4

Grundsätzlich kann jedes UI-Framework (Bootstrap) hängen von einem Gitter. Sie müssen also die einzelnen Blöcke voneinander trennen und Text in verschiedene Spalten und Bilder setzen.

.bg-img{ 
 
    height:200px; 
 
background-image: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRSZQsdLrY0gp9N9JoGJlQ-Bo4AELr4TKcNZGY-DB756oozHCFL"); 
 
    background-repeat: no-repeat; 
 
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-5 col-sm-5"> 
 
     <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia</p>   
 
    </div> 
 
    <div class="col-xs-7"> 
 
     <p> 
 
     <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRSZQsdLrY0gp9N9JoGJlQ-Bo4AELr4TKcNZGY-DB756oozHCFL" class="img-responsive"/> 
 
     </p>  
 
    </div> 
 
    </div> 
 

 
    
 
    
 
    
 
<div class="row"> 
 
    <div class="col-xs-5 col-sm-5"> 
 
      <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRSZQsdLrY0gp9N9JoGJlQ-Bo4AELr4TKcNZGY-DB756oozHCFL" class="img-responsive"/> 
 
    </div> 
 

 
    <div class="col-xs-7"> 
 
     
 
     <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. 
 
     </p> 
 
     
 
    </div> 
 
</div> 
 
    
 
    <div class="row"> 
 
    <div class=" col-sm-6"> 
 
     <div class="bg-img"> 
 
     <h4> Lorem ipsu6 dolor sit amet</h4> 
 
     </div> 
 
     </div> 
 
     
 
    <div class="col-sm-6"> 
 
     <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 
     </p> 
 
     </div> 
 
    </div> 
 
</div>

In Snippet I 3 Reihen genommen haben. In der ersten Reihe setze ich das Bild auf der linken Seite, in der zweiten Reihe auf die rechte Seite und die dritte Reihe auf die erste Reihe mit dem Text auf dem Bild. Sie können mein Snippet ausführen. Viel Glück. freue mich zu helfen.