Bootstrap - Comment faire de habillage de texte autour d'une image sur de petits appareils?
Je suis juste de commencer avec Bootstrap. Ci-dessous est un aperçu de ma page.
Mon CSS est
.snippet img{
width: 150px;
max-width: 100%;
height:auto;
}
@media(max-width: 767px) {
.snippet img{
width:100px;
float: right;
max-width: 100px;
height: auto;
margin-left: 10px;
margin-right: 10px;
}
}
Et voici mon code HTML:
<h2>About the venue</h2>
<div class="media-body snippet" >
<a class="pull-right" href="venue.php">
<img src="images/venue.jpg" alt="illustration"></a>
<p>this is the paragraph ... </p>
</div>
Je veux que l'image soit suspendu comme ça sur grand écran. Cependant, sur de petits appareils, je voudrais obtenir le texte à enrouler autour de l'image. Comment puis-je le faire?
Toute aide serait appréciée!
OriginalL'auteur beginner | 2013-12-19
Vous devez vous connecter pour publier un commentaire.
pourquoi vous ne l'utiliser? il est aussi plus intelligent 😉
http://getbootstrap.com/components/#thumbnails-custom-content
MODIFIER
inclure le code de bootstrap doc
Vous êtes de droite. J'ai donc édité mon post 🙂
C'est gentil! Mais l'image et le texte deviennent vraiment proche si je l'utilise. Aucune idée sur la façon d'insérer un espace?
Sa question se pose au sujet de l'habillage du texte sur le côté; que Bootstrap style met l'image au dessus du texte.
En effet, il met le texte ci-dessous.
OriginalL'auteur MaiKaY
Vous pouvez essayer ce
OriginalL'auteur Vikas Sharma
Essayer cette
Oui en essayant de retirer votre css
OriginalL'auteur Vikas Sharma
Ajouter cette ligne de code css
.snippet img{ width: 150px; max-width: 100%; height:auto; display:inline; } @media(max-width: 767px) { .snippet img{ width:100px; float: right; max-width: 100px; height: auto; display:inline; } }
Vous pouvez placer l'image à l'intérieur d'un paragraphe et il fonctionne parfaitement. Pour eg. <p><img src=""/>texte</p>
OriginalL'auteur sush
Vous devez ajouter la classe suivante à votre code html: "img-responsive pull-left"
Par exemple:
OriginalL'auteur Miklos Sebestyen