品牌旁边的文字

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>

有关正确的文档,请参阅http://getbootstrap.com/components/#navbar-textnavbar-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;
}