如何使引导程序图标与标签中的文本内联显示？ [英] How to make bootstrap icon display inline with text in a tag?

问题描述

我有显示文本和箭头的引导导航药丸。不幸的是，如果文本太长，则箭头会出现在锚点的边框上。

I have bootstrap navigation pill that shows text and an arrow. Unfortunately if the text is to long the arrow appears on the border of the anchor. Html looks like this.

        <a href="#">
          <span> Some longer sample text</span>
          <i class="pull-right icon-chevron-right"></i>
        </a>

演示在这里： http://jsfiddle.net/kyrisu/FNcGX/

如何与文本块内联显示（文本可以/应该换行）？

How can I display it inline with the block of text (text can/should wrap)?

推荐答案

如果您的文本可以按您说的那样换行，那么就可以了。

If your text can wrap as you said then this can work..

<span><i class="pull-right icon-chevron-right"></i>Some longer sample text</span>

更新：

<span class="iwt">
<span>Some longer sample text</span>
<i class="pull-right icon-chevron-right"></i>
</span>

.iwt{
display:block;
}

这篇关于如何使引导程序图标与标签中的文本内联显示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！