Форматирование текста в теге заголовка, содержащем глификон

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-*-* для вашего позиционирования. Ваши потребности просто ниже того, для чего предназначена инфраструктура Grash-файлов Bootstrap.

Вместо этого я бы положил на обложки .pull-left и .pull-right, чтобы разместить вашу иконку и содержимое. Я создал пример здесь:

http://www.bootply.com/LwfLZZ2exY

Примечание: Мой пример использует calc(), потому что я не был уверен, как реагировать необходим ваш подход к проектированию. Вам может потребоваться настроить этот (и, конечно, любой другой элемент), чтобы наилучшим образом удовлетворить ваши намерения.