web-dev-qa-db-fra.com

Bootstrap - Comment faire en sorte que le texte entoure une image sur de petits appareils?

Je commence tout juste avec Bootstrap. Ci-dessous un aperçu de ma page.

enter image description here

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 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 suspendue comme ça sur grand écran. Cependant, sur les petits appareils, j'aimerais que le texte soit entouré de l'image. Comment puis je faire ça? 

Toute aide serait appréciée!

cssimagetwitter-bootstrap
7
beginner

pourquoi vous ne l'utilisez pas? c'est aussi plus intelligent;) http://getbootstrap.com/components/#thumbnails-custom-content

MODIFIER

inclure le code de la documentation d'amorçage

<div class="row">
<div class="col-sm-6 col-md-4">
    <div class="thumbnail">
        <img data-src="holder.js/300x200" alt="...">

        <div class="caption">
            <h3>Thumbnail label</h3>

            <p>...</p>

            <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
        </div>
    </div>
</div>

9
MaiKaY

Vous pouvez essayer ceci

<style>
    .snippet {width: 250px;}
    .snippet img{ width: 150px; height:auto; float: left; }

  </style>
 </head>
 <body>
<div class="media-body" >
    <div class="snippet">
        <a class="pull-right" href="venue.php"><img  src="http://i.stack.imgur.com/Fa34B.png" alt="illustration"></a>
        <p>this is the paragraph ...  </p>      
    </div>
</div>
2
Vikas Sharma

Essaye ça

<div style="width: 150px;">
<img src="http://i.stack.imgur.com/Fa34B.png" align="left" width="100" height="100"> This is text  This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text
  </div>
1
Vikas Sharma

Ajouter cette ligne de code css

display:inline;
0
sush

Vous devez ajouter la classe suivante à votre code html: "img-responsive pull-left"

Par exemple:

<img  src="IMG/img.jpg" alt="about image" class="img-rounded img-responsive pull-left">
0
Miklos Sebestyen