Html 品牌旁边的文字
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20502040/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Text next to brand
提问by iamyojimbo
How do I get the Bootstrap Brand and any accompanying text to be treated together as the brand?
我如何将 Bootstrap 品牌和任何随附的文本一起视为品牌？
I have tried this:
我试过这个：
<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>
However, I can't get them to be aligned (i.e. side by side). It produces the below effect:
但是，我无法让它们对齐（即并排）。它产生以下效果：
Please note that I am using Bootstrap 3.
请注意，我使用的是 Bootstrap 3。
回答by Pierre de LESPINAY
Wrap the image in a span
将图像包裹在一个 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>
spandefaults to display: inline
span默认为 display: inline
回答by lanoxx
The correct solution would be to use navbar-texton the h3and not to use any additional divor spanelements:
正确的解决办法是使用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>
See http://getbootstrap.com/components/#navbar-textfor the proper documentation of navbar-text.
见http://getbootstrap.com/components/#navbar-text为适当的文件navbar-text。
回答by Rob
Not sure if this is correct html but I wrapped the image and text in a new div class and floated that left. Also changed the img to the new class with some padding on the right to space it from the text. Seemed to work for me but I am pretty new to bootstrap so it might not be exactly right. Your code would look like this.
不确定这是否是正确的 html，但我将图像和文本包装在一个新的 div 类中并将其向左浮动。还将 img 更改为新类，右侧有一些填充以将其与文本隔开。似乎对我有用，但我对引导程序还很陌生，所以它可能不完全正确。你的代码看起来像这样。
html
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>
add the new css class under the .navbar-brand class
在 .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;
}
回答by Dhaulagiri
This is happening because the img-responsiveclass has display:block. In this case I'm not sure you need that class for the image you are displaying since it is already quite small and not likely to run into issues with needing to be responsive.
发生这种情况是因为img-responsive该类具有display:block. 在这种情况下，我不确定您正在显示的图像是否需要该类，因为它已经很小并且不太可能遇到需要响应的问题。
Alternatively, you could override img-responsivein this instance to display:inline-blockand also have your h3be have display:inline-blockas well.
或者，您可以img-responsive在这种情况下覆盖todisplay:inline-block并且也h3可以拥有display:inline-block。
