格式化包含图形的标题标签中的文本

Question

我试图格式化新闻源项目，并希望包含图形来说明新闻项目的类型，然后在其旁边显示用户定义的文本字段。我希望将文本格式化为从缩略图缩进大约四个空格（JSFiddle中的第二个新闻提要项，其中我以不可重现的方式对其进行了硬编码）。

我做了一个布局，其中的图形是一个col-xs-1，其余的屏幕是文本，然后清零所有的填充，但它仍然太偏离我想要的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/

与风格的饲料项目图片=> http://imgur.com/a/XTERt

这似乎有点挑剔所以任何帮助的感谢提供！

Answer 1

根据您的需求，我不会建议依靠.col-*-*进行定位。您的需求仅仅在Bootstrap的Grid框架的设计之下。

相反，我会依靠包装与.pull-left和.pull-right定位您的图标和内容。我创建了一个例子在这里：

http://www.bootply.com/LwfLZZ2exY

注意：我的例子使用的calc()，因为我不知道你的设计方法如何响应需要。您可能需要调整（并且当然还有其他任何元素）以最适合您的意图。