品牌旁边的文字答案

【问题标题】：Text next to brand品牌旁边的文字
【发布时间】：2013-12-28 10:00:12
【问题描述】：

如何将 Bootstrap 品牌和任何随附文本一起视为品牌？

我试过这个：

<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。

【问题讨论】：

默认情况下，您的 H3 将始终显示为块。只需添加 CSS 样式即可将它们视为内联。

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

将图片包裹在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

【讨论】：

太棒了！精彩的！谢谢！
似乎没问题，但是...文本和图像未正确对齐。有一些规则有助于在 p 标签上正确定位 .navbar-text 类（bootstrap 3.3.5）
理想情况下，文本应该位于合适的标签内。如果它被归类为标题，则就像标题一样。虽然要注意您的层次结构。页面上不应有 H2 或更低的标签，然后是 H1

【解决方案2】：

正确的解决方案是在h3 上使用navbar-text，而不是使用任何额外的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>

有关navbar-text 的正确文档，请参阅http://getbootstrap.com/components/#navbar-text。

【讨论】：

如果你使用 p 而不是 h3，你会得到一个正确的布局。请参阅您提到的说明。
p 似乎更合理，也与引导文档一致。不幸的是，我不记得为什么我在回答中使用了h3。

【解决方案3】：

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

html

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

在 .navbar-brand 类下添加新的 css 类

.navbar-brand-name > {

  display: inline-block;
  float: left;

}

.navbar-brand-name > img {
  display: inline-block;
  float: left;
  padding: 0 15px 0 0;
}

【讨论】：

这个解决方案最适合我。是唯一一个品牌文本与其他导航元素正确对齐的。但是paddingseams 可以拉伸图像，margin seams 可以更好地工作：margin: -5px 10px;

【解决方案4】：

发生这种情况是因为img-responsive 类具有display:block。在这种情况下，我不确定您是否需要该类来显示您正在显示的图像，因为它已经很小并且不太可能遇到需要响应的问题。

或者，您可以在这种情况下将img-responsive 覆盖为display:inline-block，并且还可以将h3 设置为display:inline-block。

【讨论】：