格式化包含圖形的標題標籤中的文本

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()，因爲我不知道你的設計方法如何響應需要。您可能需要調整（並且當然還有其他任何元素）以最適合您的意圖。