gwt - 如何使用 gwtbootstarp3 在图像旁边放置文本

Question

我正在使用以下链接中提到的 GWTBootstarp3 http://gwtbootstrap3.github.io/gwtbootstrap3-demo/#images

与我的 gwt 项目。我正在尝试将标题文本移动到图像旁边，但它出现在两行中。

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui"
    xmlns:b="urn:import:org.gwtbootstrap3.client.ui">
    <b:Container fluid="true">
        <g:FlowPanel>
            <b:Image type="ROUNDED" url="images/logo.jpg" addStyleNames="topLeft"></b:Image>
            <b:Heading size="H1" text="My Application Title" addStyleNames="topLeft"></b:Heading>
        </g:FlowPanel>
    </b:Container>
</ui:UiBinder> 

Answer 1

那是因为 a Headinghasdisplay: block会导致这种行为。您应该做的可能是将您的包装Image在一个Heading：

<b:Heading size="H1" addStyleNames="topLeft">
    <b:Image type="ROUNDED" url="images/logo.jpg" />
    <h:Text text="My Application Title" />
</b:Heading>