グリフコンを含むヘッダータグ内のテキストの書式設定

Question

ニュースフィードアイテムを書式設定しようとしています。ニュースアイテムの種類とその横にユーザー定義のテキストフィールドを示すグリフコンを含める必要があります。グリフコンから約4スペース分インデントされたテキストをフォーマットしたいと思います（JSFiddleの2番目のニュースフィード項目で、再現不可能な方法でそれをハードコードしています）。

グリフコンがcol-xs-1になっていて、残りの部分がテキストのためにレイアウトされていて、すべてのパディングがゼロになっていますが、 JSFiddleの3番目のニュースフィード項目）。

<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()を利用します。あなたは、あなたの意図に最もよく合うようにこれを調整する必要があるかもしれません。