格式化包含图形的标题标签中的文本
问题描述:
我试图格式化新闻源项目,并希望包含图形来说明新闻项目的类型,然后在其旁边显示用户定义的文本字段。我希望将文本格式化为从缩略图缩进大约四个空格(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
这似乎有点挑剔所以任何帮助的感谢提供!
答
根据您的需求,我不会建议依靠.col-*-*
进行定位。您的需求仅仅在Bootstrap的Grid框架的设计之下。
相反,我会依靠包装与.pull-left
和.pull-right
定位您的图标和内容。我创建了一个例子在这里:
http://www.bootply.com/LwfLZZ2exY
注意:我的例子使用的calc()
,因为我不知道你的设计方法如何响应需要。您可能需要调整(并且当然还有其他任何元素)以最适合您的意图。
这就是我正在寻找的!我遇到了一个奇怪的问题,恐怕不会产生任何帮助。当使用Chrome在本地运行此代码时,这很好。只要我将它推出分段,我就会得到宽度/计算函数的无效属性值。我一直在阅读钙,但这没有任何意义,我担心它不会给任何人,但我认为我只是把它放在那里,以防有人有任何想法或处理奇怪的问题,如这之前。 – JSchins
如果您遇到其他问题,请务必发布一个新主题(搜索后查看它是否已被解决!) –