html - 格式化标题标签中包含字形的文本

Question

我正在尝试格式化新闻提要项，并希望包含一个字形图标来说明新闻项的类型，然后在其旁边包含一个用户定义的文本字段。我希望对文本进行格式化，使其从字形缩进大约四个空格(JSFiddle 中的第二个新闻提要元素，我以不可复制的方式对其进行了硬编码)。

我做了一个布局，其中 glyphicon 在 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/

应用了样式的 Feed 元素的图像 => http://imgur.com/a/XTERt

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

Answer 1

鉴于您的需求，我不建议您依赖 .col-*-* 进行定位。您的需求仅低于 Bootstrap 的网格框架的设计目的。

相反，我会依靠带有 .pull-left 和 .pull-right 的包装器来定位您的图标和内容。我在这里创建了一个示例:

http://www.bootply.com/LwfLZZ2exY

注意:我的示例使用了 calc()，因为我不确定您的设计方法需要多大的响应能力。您可能需要调整此(当然还有任何其他元素)以最适合您的意图。