Wie man text wrap-around-Bild mit bootstrap 4 ohne Schwimmer?

Brauche ich, um den text wrap-around-Bild mit bootstrap 4 ohne schwimmt, ist es möglich?

Hier mein code:

<article class="row single-post mt-5 no-gutters">
       <div class="image-wrapper col-md-6">
          <?php the_post_thumbnail(); ?>
        </div>
        <div class="single-post-content-wrapper p-3">
          <?php the_content(); ?>
        </div>
  </article>

Hier, was ich jetzt habe:
Wie man text wrap-around-Bild mit bootstrap 4 ohne Schwimmer?

Hier was ich brauche:
Wie man text wrap-around-Bild mit bootstrap 4 ohne Schwimmer?

InformationsquelleAutor Belial | 2018-03-11



2 Replies
  1. 11

    Brauche ich, um den text wrap-around-Bild mit bootstrap 4 ohne schwimmt, ist es möglich?

    Nein, in diesem Fall müssen Sie die float-left Klasse für das Bild. Aber Sie müssen nicht auf irgendwelche wrapper für das Bild. Sie können loszuwerden, die wrapper-div komplett aus und fügen Sie Ihre Klassen auf das Bild.

    Andere Sache, die Sie unbedingt tun müssen:

    Alle Ihre Inhalte in Spalten Bootstrap, weil nur die Spalten Bootstrap werden kann, die direkte Kinder des Bootstrap-Zeilen.

    Hier ist ein funktionierendes code-snippet (Hinweis: ich habe die image wrapper-div in da, aber ich empfehlen Ihnen, es loszuwerden, weil, dass ist völlig unnötig code. Fügen Sie Ihre Klassen direkt auf das Bild):

    HTML:

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        
    <div class="container">
        <article class="row single-post mt-5 no-gutters">
            <div class="col-md-6">
                <div class="image-wrapper float-left pr-3">
                    <img src="https://placeimg.com/150/150/animals" alt="">
                </div>
                <div class="single-post-content-wrapper p-3">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ad, ex eaque fuga minus reprehenderit asperiores earum incidunt. Possimus maiores dolores voluptatum enim soluta omnis debitis quam ab nemo necessitatibus.
                    <br><br>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ad, ex eaque fuga minus reprehenderit asperiores earum incidunt. Possimus maiores dolores voluptatum enim soluta omnis debitis quam ab nemo necessitatibus.
                </div>
            </div>
        </article>
    </div>

    • Funktioniert wie ein Charme, Dank!
  2. -2

    Nicht warum Sie so etwas wie dieses:

    HTML:

    <div class="container">
      <img src="img/example.png" align="left" width="50%">
      <p>Text here</p>
    </div>

    Einfach

    align=“left“

    wird die Arbeit machen!

    • Während noch unterstützt in den wichtigsten Browsern, das align-Attribut ist veraltet.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.