Html 品牌旁边的文字

如何将引导品牌和任何随附文本一起视为品牌

我试过这个：

<nav class="navbar navbar-default">
    <div class="navbar-header">
        <div class="navbar-brand">
            <a href="..." ><img class="img-responsive" src="/brand.png")?>"></a>
            <h3>Ultimate Trade Sizer</h3>
        </div>
    </div>
</nav>

最终贸易规模

但是，我无法使它们对齐（即并排）。它产生以下效果：

---

请注意，我使用的是Bootstrap 3。

之所以出现这种情况，是因为

img responsive

类具有

display:block

。在这种情况下，我不确定您是否需要为正在显示的图像使用该类，因为它已经非常小，并且不太可能遇到需要响应的问题

---

或者，在本例中，您可以将

img responsive

覆盖到

display:inline block

，也可以将

h3

覆盖到

display:inline block

不确定这是否是正确的html，但我将图像和文本包装在一个新的div类中，并将其向左浮动。还将img更改为新类，并在右侧添加一些填充，以将其与文本隔开。似乎对我有用，但我对bootstrap还很陌生，所以它可能并不完全正确。您的代码将如下所示

html

---

将图像包装在

span

<nav class="navbar navbar-default">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">
            <span><img src="#"/></span>
            Ultimate Trade Sizer
        </a>
    </div>
</nav>

---

span

默认为

display:inline

正确的解决方案是在

h3

上使用

navbar文本

，而不使用任何额外的

div

或

span

元素：

<nav class="navbar navbar-default">
    <div class="navbar-header">
        <div class="navbar-brand">
            <a href="...">
                <img class="img-responsive" src="/brand.png">">
            </a>
            <h3 class="navbar-text">Ultimate Trade Sizer</h3>
        </div>
    </div>
</nav>

最终贸易规模

---

有关

导航栏文本

的正确文档，请参阅！精彩的！谢谢看起来还可以，但是。。。文本和图像没有正确对齐。有一些规则有助于正确定位。p标签上的navbar文本类（bootstrap 3.3.5）理想情况下，文本应该位于合适的标签内。。就像一个标题，如果它被归类为标题。。尽管要小心你的等级制度。你不应该在页面上首先有一个H2或更低的标签，在H1之前如果你使用p而不是h3，你会得到一个正确的布局。参见您提到的描述。

p

似乎更合理，并且与引导文档一致。不幸的是，我不记得为什么我在回答中使用了

h3

。默认情况下，您的h3将始终显示为块。只需添加CSS样式就可以将它们作为内联处理。这个解决方案最适合我。是唯一一个品牌文字与其他导航元素正确对齐的品牌。但是

填充

接缝可以拉伸图像，

边距

接缝可以更好地工作：

边距：-5px 10px
<nav class="navbar navbar-default">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">
            <span><img src="#"/></span>
            Ultimate Trade Sizer
        </a>
    </div>
</nav>

<nav class="navbar navbar-default">
    <div class="navbar-header">
        <div class="navbar-brand">
            <a href="...">
                <img class="img-responsive" src="/brand.png">">
            </a>
            <h3 class="navbar-text">Ultimate Trade Sizer</h3>
        </div>
    </div>
</nav>