How to set a 2 custom icon in dataview with bootstrap theme

问题

I have the same problem as in this post with one additional complication. I need to put two icons in my dataView, and have them horizontal not vertical.

I can get the icons in there but they do not look correct, as I need them to be horizontally aligned:

 <xe:this.facets>            
            <xp:panel xp:key="icon">
                <xp:div id="div1">
                    <xp:this.styleClass>
                        <![CDATA[#{javascript:return "glyphicon glyphicon-arrow-up pull-left"}]]>
                    </xp:this.styleClass>
                    <xp:eventHandler event="onclick" submit="true"
                        refreshMode="complete">
                        <xp:this.action><![CDATA[#{javascript://Do stuff here}]]></xp:this.action>
                    </xp:eventHandler>
                </xp:div>
                <xp:div id="div2">
                    <xp:this.styleClass>
                        <![CDATA[#{javascript:return "glyphicon glyphicon-arrow-down pull-right"}]]>
                    </xp:this.styleClass>
                    <xp:eventHandler event="onclick" submit="true"
                        refreshMode="complete">
                        <xp:this.action><![CDATA[#{javascript://Do stuff here}]]></xp:this.action>
                    </xp:eventHandler>
                </xp:div>
            </xp:panel>
    </xe:this.facets>

回答1:

Since those are divs, they're going to be display: block by default. I'd suggest either adding something like style="display: inline" to the <xp:div/>s or changing them to <xp:panel tagName="i"/>.

来源：https://stackoverflow.com/questions/34755222/how-to-set-a-2-custom-icon-in-dataview-with-bootstrap-theme