品牌旁边的文字

Question

如何将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。

Answer 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

Answer 2

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

Answer 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;
}

Answer 4

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

或者，您可以将此实例中的img-responsive覆盖为display:inline-block，同时让h3也拥有display:inline-block。