如何使用 gwtbootstrap3 在图像旁边放置文本

【问题标题】：How to place text next to image using gwtbootstarp3如何使用 gwtbootstrap3 在图像旁边放置文本
【发布时间】：2023-08-19 10:26:01
【问题描述】：

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

我的 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>

【问题讨论】：

标签： gwt uibinder gwtbootstrap3

【解决方案1】：

这是因为 Heading 具有 display: 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>

【讨论】：

谢谢先生，我现在就试试