Mise en forme du texte dans une balise d'en-tête contenant du glyphicon

Question

Je tente de mettre en forme un élément de fil de nouvelles et je souhaite inclure un glyphicon pour illustrer le type d'élément d'information, puis un champ de texte défini par l'utilisateur. Je voudrais que le texte soit formaté de façon à ce qu'il soit décalé d'environ quatre espaces par rapport au glyphicon (deuxième élément de fil de nouvelles dans le JSFiddle où je l'ai codé en dur d'une manière non reproductible).

J'ai fait une mise en page où le glyphicon était dans un col-xs-1 et le reste de l'écran était pour le texte et ensuite remis à zéro tout le rembourrage mais il est encore trop loin pour ce que je voudrais Troisième article de fil de nouvelles dans le JSFiddle).

<div class="col-xs-12 news-feed-item-container" style="background-color:white"> 
    <h3><span class="glyphicon glyphicon-earphone"></span>New conversation with Brett Harrsion from Firm XYZ shows there is progress being made towards the product approval</h3> 
    <p class="col-xs-11 col-xs-offset-1">There have been talks with the team at advisor group that lead us to believe we will be able to sell MLCDs sometime in early March</p> 
    </div> 


    <div class="col-xs-12 news-feed-divider-yellow"></div> 
    <div class="col-xs-12 news-feed-item-container"> 
    <h3 style="white-space:pre"><span class="glyphicon glyphicon-earphone"></span> New conversation with Brett Harrsion from Firm XYZ shows there<br>  is progress being made towards the product approval</h3> 
    <p class="col-xs-11 col-xs-offset-1">There have been talks with the team at Firm XYZ that lead us to believe we will be able to sell product A to them sometime in early March</p> 
    </div> 

    <div class="col-xs-12 news-feed-divider"></div> 
    <div class="col-xs-12 news-feed-item-container" style="background-color:white"> 
    <div class="col-xs-1" style="padding-right:0"> 
     <h3><span class="glyphicon glyphicon-earphone"></span></h3></div> 
    <div class="col-xs-11" style="padding-left:0"> 
     <h3>New conversation with Brett Harrsion from Firm XYZ shows there is progress being made towards the product approval</h3></div> 
    <p class="col-xs-11 col-xs-offset-1">There have been talks with the team at advisor group that lead us to believe we will be able to sell MLCDs sometime in early March</p> 
    </div> 

jsFiddle: https://jsfiddle.net/schins02/r0p83uaq/

Image articles d'alimentation avec des styles appliqués => http://imgur.com/a/XTERt

Cela semble un peu pointilleux donc merci pour toute l'aide fournie!

Answer 1

Compte tenu de vos besoins, je ne recommanderais pas de compter sur .col-*-* pour votre positionnement. Vos besoins sont simplement inférieurs à ce que le framework Grid de Bootstrap est conçu. Au lieu de cela, je compterais sur les emballages avec .pull-left et .pull-right pour positionner votre icône et le contenu. J'ai créé un exemple ici:

http://www.bootply.com/LwfLZZ2exY

Remarque: Mon exemple utilise calc() parce que je ne savais pas comment répondre à votre approche de conception nécessaire. Vous devrez peut-être ajuster ceci (et bien sûr tout autre élément) pour mieux correspondre à vos intentions.