Habillage de texte autour de bootstrap image
J'ai essayé de l'habillage de texte autour d'une image à l'aide du bootstrap système de grille de limiter la largeur de l'image.
La disposition générale serait un lot de ce genre.
Je suis actuellement en utilisant
<div class="row">
<div class="col-xs-12 col-sm-5">
<img class="img-responsive" src="{{$blogPost->getImagePath()}}" width="100%">
</div>
<div class="col-xs-12 col-sm-7">
<div class="row">
<div class="col-sm-6">
<h2>{!!$blogPost->title!!}</h2>
</div>
<div class="col-sm-6">
<h3 class="pull-right">
{{$blogPost->created_at}}
</h3>
</div>
</div>
{!! Purifier::clean($blogPost->message) !!}
</div>
<div class="col-xs-12">
<hr />
</div>
</div>Ce code entraîne la mise en page suivante.
J'ai essayé de supprimer la deuxième colonne et ne gardant que la colonne dans laquelle l'image est imbriqué.
<div class="row">
<div class="col-xs-12 col-sm-5">
<img class="img-responsive" src="{{$blogPost->getImagePath()}}" width="100%">
</div>
<div class="row">
<div class="col-sm-6">
<h2>{!!$blogPost->title!!}</h2>
</div>
<div class="col-sm-6">
<h3 class="pull-right">
{{$blogPost->created_at}}
</h3>
</div>
</div>
{!! Purifier::clean($blogPost->message) !!}
<div class="col-xs-12">
<hr />
</div>
</div>Ce résultat inattendu texte de placement comme peut être vu ici.
Comment puis-je obtenir l'effet désiré et de continuer à utiliser le bootstrap système de grille pour définir la largeur de mon image en ce qui concerne la taille de la fenêtre d'affichage?
Vous devez vous connecter pour publier un commentaire.
Enveloppant le titre et
created atdate dans une nouvelle colonne pour compléter la largeur de l'image et le réglage de tous les autres textes, en dehors de toute colonne qui a fait le tour pour moi.Un petit bémol est que les marges ne sont pas alignés, mais je suis sûr que je vais trouver une solution pour que l'utilisation de certains CSS personnalisé.
Exemple en utilisant bootstrap :
HTML:
Ce qui a fonctionné pour moi est la suivante (basée sur l'OP du code d'origine). S'il vous plaît pas que j'ai utilisé une
max-widthattribut style pour garder de la réactivité (40% d'être à peu près 5 sur 12):la réponse de @milo526 fonctionne assez bien, il y a juste un petit défaut donné par les marges négatives de ligne et pas de marge pour le texte. vous pouvez ajouter un div habillage du texte avec les marges ou les rembourrages de la moitié de la gouttière de la largeur ou à l'aide d'une col-sm-12 sans flotteur.
Un autre petit défaut est donnée par pas assez de marges entre l'image et le texte, à cause de cela, vous devez ajouter un supplément de remplissage à droite de l'image. J'ai mis ce des ajustements de style en ligne, de sorte qu'ils sont visibles.
https://codepen.io/davdenic/pen/bPGRqa
Vous avez besoin pour faire flotter l'image contenant gauche.
Cela va forcer le texte à enrouler autour de
.rowet.colAvec votre mise en page, vous ne voulez probablement pas à utiliser un bootstrap grille. Je serais tenté de dépouiller un retour à la base et à partir de làCela fonctionne dans le bootstrap 4: