글리프콘을 포함하는 헤더 태그의 텍스트 서식 지정

Question

뉴스 피드 항목의 서식을 지정하려고하고 텍스트 항목 옆에 사용자 정의 텍스트 필드를 설명하기 위해 글리프콘을 포함하려고합니다. 글리프콘 (JSFiddle의 두 번째 뉴스 피드 항목)에서 4 개의 공백을 들여서 재현 할 수없는 방식으로 텍스트를 하드 코딩 했으므로 텍스트 서식을 지정하고 싶습니다.

글리프콘이 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-*-*에 의존하지 않는 것이 좋습니다. 귀하의 요구는 부트 스트랩의 그리드 프레임 워크가 설계 한 것보다 간단합니다.

대신 아이콘과 내용의 위치를 ​​지정하려면 .pull-left 및 .pull-right의 래퍼가 필요합니다. 여기 예를 만들었습니다

http://www.bootply.com/LwfLZZ2exY

주을 : 나는 당신의 디자인 접근 방식이 필요 어떻게 반응 확실하지 않았기 때문에 내 예는 calc()를 사용합니다. 당신은 당신의 의도에 가장 잘 부합되도록 이것을 조정할 필요가 있습니다.