web-dev-qa-db-fra.com

Aligner l'image à gauche du texte sur la même ligne - Twitter Bootstrap3

Actuellement, j'ai un titre de paragraphe et une image à sa droite, sur la même ligne:

<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>

Cela fonctionne très bien - l'en-tête de contenu et l'image se trouvent sur la même ligne. Cependant, lorsque je mets l'image avant la div content-heading, elles ne sont plus sur la même ligne. C’est ce que je veux réaliser - image puis en-tête de contenu - sur la même ligne.

htmlcsstwitter-bootstrapimage
46
MattSull

Vous pouvez utiliser flottant:

<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>

Si vous voulez le suivant <p> pour rester sur la même ligne aussi, supprimez son

style="clear:both"

mais alors vous devriez ajouter

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

après ça.

41
Oriol

Utiliser Twitter Bootstrap peuvent être le meilleur choix:

  • pull-left rend un élément flottant à gauche
  • clearfix permet à l'élément de contenir des éléments flottants (s'il n'est pas déjà défini via une autre 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>
82
Sherbrow

À partir de Bootstrap v3.3.0, vous pouvez utiliser .media-left et .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>

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

44
maxwilms

Pour 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>
8
Dilip Kumar

J'utiliserais la grille de Bootstrap pour obtenir le résultat souhaité. La classe = "img-responsive" fonctionne bien. Quelque chose comme:

    <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>
4
Dave

Utiliser la colonne Nesting

Pour imbriquer votre contenu dans la grille par défaut, ajoutez une nouvelle colonne .row et un ensemble de colonnes .col-sm- * dans une colonne .col-sm- * existante. Les lignes imbriquées doivent inclure un ensemble de colonnes ne dépassant pas 12 (il n'est pas nécessaire d'utiliser les 12 colonnes disponibles).

enter image description here

<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>
3
Mile Mijatovic