格式化包含 glyphicon 的标题标签中的文本

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()，因为我不确定您的设计方法需要多大的响应能力。您可能需要调整此（当然还有其他任何元素）以最适合您的意图。