我想使用Bootstrap 3默认导航栏的图像标志，而不是文本品牌。什么是正确的方法来做到这一点，而不引起任何问题与不同的屏幕尺寸?我认为这是一个常见的需求，但我还没有看到一个好的代码示例。除了在所有屏幕尺寸上都有可接受的显示外，一个关键要求是小屏幕上的菜单可折叠性。
我试着在有navbar-brand类的A标签内放置一个IMG标签，但这导致菜单不能在我的android手机上正常运行。我还尝试了增加导航栏类的高度，但这把事情搞砸了。
顺便说一下，我的logo图像比导航栏的高度要大。
当前回答
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" rel="home" href="#" title="Buy Sell Rent Everyting">
<img style="max-width:100px; margin-top: -7px;"
src="/img/transparent-white-logo.png">
</a>
</div>
其他回答
这段代码工作完美，如果你需要看到品牌居中和自动宽度工具栏。 它包含从正确路径获取图像文件的Wordpress函数:
<a class="navbar-brand page-scroll" rel="home"
href="#page-top" title="Title">
<img style="height: 100%; width: auto;"
src="<?php echo get_template_directory_uri();?>/img/logo.png">
对于这个问题，最简单和最好的答案是根据你的logo设置最大宽度和高度，图像的最大高度为50px，但不超过200px。
<a href="index.html">
<img src="imgs/brand-w.png" style="max-height:50px;max-width:200px;">
</a>
这取决于你的logo大小和你的导航栏项目。
为什么每个人都想用艰难的方式来做?当然，其中一些方法是有效的，但它们比必要的要复杂得多。
好的，首先，你需要一个图像，将适合你的导航栏。你可以通过css的height属性来调整你的图像(允许宽度缩放)，或者你可以只使用一个适当大小的图像。无论你决定做什么，这看起来将取决于你的图像大小。
出于某种原因，每个人都想用navbar-brand将图像粘在锚中，这是不必要的。navbar-brand应用的文本样式，不是必要的图像，以及navbar-left类(就像拉左，但用于导航栏)。所有你真正需要的是添加导航栏左。
<a href="#" class="navbar-left"><img src="/path/to/image.png"></a>
你甚至可以用一个导航栏品牌项目，它将出现在图像的右侧。
<header class="navbar navbar-inverse header-outer" role="banner">
<div class="container form-inline">
<img src="@Url.Content(" ~/Content/img/Logo-Sample.png ")" alt="Image" id="logo" class="img-responsive pull-left" />
<div class="pull-right padding-top">
<form class="hidden-xs" role="form">
<div class="form-group" style="padding-left:10px">
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Username">
</div>
<div class="form-group">
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="form-group navbar-remember">
<label class="white-font">
<input type="checkbox" class="white-font"> Remember me
</label>
</div>
<button type="button" class="btn btn-primary form-group" title="Sign In">Sign In</button>
</form>
</div>
</div>
</header>
请理解你自己的努力代码:D这是我的草案代码，它已经工作:)这里是截图。
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" rel="home" href="#" title="Buy Sell Rent Everyting">
<img style="max-width:100px; margin-top: -7px;"
src="/img/transparent-white-logo.png">
</a>
</div>
