Question

我正在尝试格式化新闻Feed项目，并希望包含一个glyphicon来说明新闻项目的类型，然后是旁边的用户定义文本字段。我希望将文本格式化，使其缩写为glyphicon中的四个空格（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项的图片=＆gt; http://imgur.com/a/XTERt

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

Answer 1

根据您的需求，我不建议您依靠.col-*-*来定位。您的需求仅限于Bootstrap的Grid框架的设计目标。

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

http://www.bootply.com/LwfLZZ2exY

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

格式化包含glyphicon的标头标记中的文本

1 个答案: