Discussion :

[Guy-greg44]

Bonjour, je dois utiliser un média object pour avoir une image alignée a gauche, et un titre suivie de texte dans un média body aligné à droite de l'image.
Mon problème est le suivant, l'image se positionne systématiquement au dessus du titre et donc du texte. J'ai essayé plusieurs solutions proposées par différents sites, aucune ne fonctionne et je ne comprends vraiment pas pourquoi. Merci de votre aide !

[mathieu]

montrez nous les codes HTML et CSS que vous avez essayés.

[Guy-greg44]

J'ai essayé ces codes la :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="media">
        <img class="mr-3" src="img/fleur1.jpg">
	<div class="media-body">
		<h3 class="mt-03 mb-1">titre</h3>
		texte
	</div>
</div>
 
<div class="media">
	<div class="media-left">
		<img class="mr-3" src="img/fleur1.jpg">
	</div>
	<div class="media-body">
		<h3 class="mt-03 mb-1">titre</h3>
		texte
	</div>
</div>
 
<div class="media">
	<img class="align-self-start mr-3" src="img/fleur1.jpg">
	<div class="media-body">
		<h3 class="mt-03 mb-1">titre</h3>
		texte
	</div>
</div>

Et j'ai aussi essayé de mettre trois media object dans un <ul> car mon but premier était d'en avoir trois à la suite.

[NoSmoking]

Bonjour,
quelle version de BootStrap utilises-tu ?

Dans la ver.4.5 l'exemple montre que tu ne structures pas correctement ton composant

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<div class="media">
  <img src="..." class="align-self-start mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Top-aligned media</h5>
    <p>Cras sit amet nibh libero, in ....</p>
    <p>Donec sed odio dui. Nullam ...</p>
  </div>
</div>

Un de tes essais est pourtant visiblement correct ?!?

Voir : Media object : Top-aligned media

[Guy-greg44]

J'étais en version 5.0.0 qui a supprimé les media object, d'où le fait que je ne trouvait pas l'erreur, je suis repassé en 4.6 et tout fonctionne, merci a vous