Allinea immagine a sinistra del testo sulla stessa linea - Twitter Bootstrap

Question

Attualmente ho un paragrafo di intestazione e un'immagine alla sua destra, sulla stessa linea:

<div class="paragraphs"> 
    <div class="row"> 
    <div class="span4"> 
     <div class="content-heading"><h3>Experience &nbsp </h3><img src="../site/img/success32.png"/></div> 
     <p>Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p> 
    </div> 
    </div> 
</div> 

Questo funziona bene - il contenuto-intestazione e il l'immagine è sulla stessa linea. Tuttavia, quando inserisco l'immagine prima del div di intestazione del contenuto, non si trovano più sulla stessa riga. Questo è ciò che voglio ottenere - immagine e intestazione del contenuto - sulla stessa linea.

Answer 1

È possibile utilizzare galleggiante:

<div class="paragraphs"> 
    <div class="row"> 
    <div class="span4"> 
     <img style="float:left" src="../site/img/success32.png"/> 
     <div class="content-heading"><h3>Experience &nbsp </h3></div> 
     <p style="clear:both">Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p> 
    </div> 
    </div> 
</div> 

Se si desidera che il seguente <p> di soggiornare presso la stessa linea anche, rimuovere il suo

style="clear:both" 

ma poi si dovrebbe aggiungere

<div style="clear:both"></div> 

dopo di esso.

Answer 2

Uso classi Twitter Bootstrap può essere la scelta migliore:

• pull-left rende un elemento flottante a sinistra
• clearfix consente all'elemento contenga elementi galleggianti (se non già impostato tramite un'altra classe)

<div class="paragraphs"> 
    <div class="row"> 
    <div class="span4"> 
     <div class="clearfix content-heading"> 
      <img class="pull-left" src="../site/img/success32.png"/> 
      <h3>Experience &nbsp </h3> 
     </div> 
     <p>Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p> 
    </div> 
    </div> 
</div> 

Answer 3

Per Bootstrap 3.

<div class="paragraphs"> 
    <div class="row"> 
    <div class="col-md-4"> 
     <div class="content-heading clearfix media"> 
      <h3>Experience &nbsp </h3> 
      <img class="pull-left" src="../site/img/success32.png"/> 
     </div> 
     <p>Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p> 
    </div> 
    </div> 
</div> 

Answer 4

Partendo Bootstrap v3.3.0 è possibile utilizzare .media-left e .media-body

<div class="media"> 
    <span class="media-left"> 
     <img src="../site/img/success32.png" alt="..."> 
    </span> 
    <div class="media-body"> 
     <h3 class="media-heading">Experience</h3> 
     ... 
    </div> 
</div> 

Documentazione: https://getbootstrap.com/docs/3.3/components/#media

Answer 5

userei griglia di Bootstrap per ottenere il risultato desiderato. La classe = "img-responsive" funziona bene. Qualcosa di simile:

<div class="container-fluid"> 
     <div class="row"> 
      <div class="col-md-3"><img src="./pictures/placeholder.jpg" class="img-responsive" alt="Some picture" width="410" height="307"></div> 
      <div class="col-md-9"><h1>Heading</h1><p>Your Information.</p></div> 
     </div> 
    </div> 

Answer 6

Usa colonna Nesting

Per nidificare il contenuto con la griglia di default, aggiungere un nuovo .row e set di colonne .col-SM-* all'interno di un esistente .col-SM- * colonna. Le righe annidate devono includere un set di colonne che ne aggiungono fino a 12 o meno (non è necessario che tu utilizzi tutte le 12 colonne disponibili).

<div class="row"> 
 
    <div class="col-sm-9"> 
 
    Level 1: .col-sm-9 
 
    <div class="row"> 
 
     <div class="col-xs-8 col-sm-6"> 
 
     Level 2: .col-xs-8 .col-sm-6 
 
     </div> 
 
     <div class="col-xs-4 col-sm-6"> 
 
     Level 2: .col-xs-4 .col-sm-6 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>