Wie kann ich einen Titel neben einem Bild in einem Bootstrap-Gitter platzieren?

Question

Ich versuche, Apples iPhone Messaging-Schnittstelle zu replizieren. Ich kann jedoch nicht den Namen der Person im Posteingang neben dem Initialsymbol anzeigen, und ich kann die kleinen grauen Buchstaben nicht unter dem Namen der Person finden. Ich habe einen Screenshot hinzugefügt, damit Sie eine bessere Vorstellung davon haben, was ich machen möchte!

Hier ist mein aktueller HTML-Markup-Code, den ich habe:

<section class="messaging-body"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-xs-6 col-md-6"> 
       <div class="messaging-icon"> 
        <img class="img-responsive" src="message-name.png"> 
       </div> 
      </div> 
     </div> 
    </div> 
</section> 

Current image
Desired image

Bitte lassen Sie mich wissen, wenn Sie eine Idee haben, wie diese Arbeit zu machen. Vielen Dank!

Answer 1

Ist es möglich, dass die Breite der Initialen zu groß ist? Haben Sie versucht, col-md-2 oder col-md-1 für die Initialen zu verwenden? Sie können Inline-Block in CSS auch verwenden, um die zwei Textfelder mit dem Initialbild auszurichten. Ich würde den Text in ein div einpacken, so dass Sie nur dieses ausrichten müssen. Von dem Code, den du gepostet hast, wäre das meine beste Schätzung!

<section class="messaging-body"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-xs-2 col-md-2"> 
       <div class="messaging-icon"> 
        <img class="img-responsive" src="message-name.png"> 
       </div> 
      </div> 
      <div class="col-xs-10 col-md-10"> 
       <div class="message"> 
        <h4>Name of the person</h4> 
        <p>Lorem Ipsum dolor sit amet, dicta paulo no est...</p> 
       </div> 
      </div> 
     </div> 
    </div> 
</section> 

CSS

.message { 
    display: inline-block; 
}