文本旁边的品牌

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

但是，我不能让他们alignment（即并排）。 它产生以下效果：

请注意，我正在使用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

不知道这是否是正确的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 3

正确的解决scheme是在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 。

Answer 4

这是因为img-responsive类有display:block 。 在这种情况下，我不确定你需要那个类的图像，因为它已经很小，不太可能遇到需要响应的问题。

或者，你可以在这个例子中覆盖img-responsive来display:inline-block ，同时你的h3也有display:inline-block 。