web-dev-qa-db-fra.com

Bootstrap Align Image avec le texte

J'essaie d'aligner une image du côté gauche avec du texte à l'aide de boostrap, et lorsque la page est affichée sur des appareils mobiles, les images sont centrées en haut du texte!

<div class="container">
<div class="row">
    <h1>About Me</h1>
    </class>
     <div class="col-md-4">
     <div class="imgAbt">
        <img  width="220" height="220" src="img/me.jpg">
     </div>
     </div>
    <div class="col-md-8"><p>Lots of text here...With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and o</p></div>
</div>
</div>

J'ai également essayé .col-md-3 .col-md-pull-9 avec .col-md-9 .col-md-Push-3, mais je ne pouvais toujours pas obtenir les résultats souhaités, semblable à ce modèle

htmlcsstwitter-bootstrap
11
rikket

Démo Fiddle

Vous avez le choix entre deux choix: corriger votre balisage afin qu'il utilise les éléments corrects et utilise le système de grille Bootstrap:

<div class="container">
     <h1>About Me</h1>
    <div class="row">
        <div class="col-md-4">
            <div class="imgAbt">
                <img width="220" height="220" src="img/me.jpg" />
            </div>
        </div>
        <div class="col-md-8">
            <p>Lots of text here...With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and o</p>
        </div>
    </div>
</div>

Ou, si vous souhaitez que le texte épouse étroitement l'image, modifiez votre marquage comme suit:

<div class="container">
    <h1>About Me</h1>
    <div class="row">
        <div class="col-md-12">
            <img style='float:left;width:200px;height:200px; margin-right:10px;' src="img/me.jpg" />
            <p>Lots of text here...With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and o</p>
        </div>
    </div>
24
SW4

utilisez le grid-system de boostrap, plus d'informations ici

par exemple

<div class="row">
  <div class="col-md-4">here img</div>
  <div class="col-md-4">here text</div>
</div>

de cette façon, lorsque la page sera réduite, la seconde div (le texte) sera trouvée sous la première (l'image)

4
WhiteLine

Essayez d'utiliser .pull-left-left aligner l'image avec le texte.

Ex:

<p>At the time all text elements goes here.At the time all text elements goes here. At the time all text elements goes here.<img src="images/hello-missing.jpg" class="pull-left img-responsive" style="padding:15px;" /> to uncovering the truth .</p>
2
Sparkz

<div class="container">
     <h1>About Me</h1>
    <div class="row">
        <div class="col-md-4">
            <div class="imgAbt">
                <img width="100%" height="100%" src="img/me.jpg" />
            </div>
        </div>
        <div class="col-md-8">
            <p>Lots of text here...With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and o</p>
        </div>
    </div>
</div>

0
Hưng Hà

Je pense que cela vous est utile

<div class="container">
        <div class="page-header">
                <h1>About Me</h1>
            </div><!--END page-header-->
        <div class="row" id="features">
                <div class="col-sm-6 feature">
                        <img src="http://lorempixel.com/200/200" alt="Web Design" class="img-circle">
                </div><!--END feature-->

                <div class="col-sm-6 feature">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
                </div><!--END feature-->
            </div><!--end features-->
    </div><!--end container-->
0
Ashish

je suis une nouvelle abeille; p. Et j'ai rencontré le même problème. Et la solution est des objets BS Media. s'il vous plaît voir le code .. 

<div class="media">
   <div class="media-left media-top">
    <img src="something.png" alt="@l!" class="media-object" width="20" height="50"/>
    </div>
   <div class="media-body">
      <h2 class="media-heading">Beside Image</h2>
   </div>
</div>
0
user7462729
  <div class="container">
          <h1>About me</h1>
       <div class="row">
         <div class="pull-left ">
             <img src="http://lorempixel.com/200/200" class="col-lg-3" class="img-    responsive" alt="Responsive image">
                <p class="col-md-4">Lots of text here... </p> 
                </div>

          </div>
      </div>
   </div>
0
Nirvana 11b