我想使用Bootstrap 3默认导航栏的图像标志，而不是文本品牌。什么是正确的方法来做到这一点，而不引起任何问题与不同的屏幕尺寸?我认为这是一个常见的需求，但我还没有看到一个好的代码示例。除了在所有屏幕尺寸上都有可接受的显示外，一个关键要求是小屏幕上的菜单可折叠性。
我试着在有navbar-brand类的A标签内放置一个IMG标签，但这导致菜单不能在我的android手机上正常运行。我还尝试了增加导航栏类的高度，但这把事情搞砸了。
顺便说一下，我的logo图像比导航栏的高度要大。
当前回答
这取决于你想让你的标志有多高。
导航栏中默认的<a>高度是20px，所以如果你在logo上指定height: 20px，它会很好地对齐。
然而，这对于一个标志来说有点小，所以我选择了这个:
<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="Brand">
<img style="height: 30px; margin-top: -5px;"
src="/img/brand.png">
</a>
</div>
这使得图像高30px，并通过在顶部添加负边距来垂直对齐图像(5px是a上的填充物与图像大小之差的一半)。
你也可以改变<a>元素的填充，例如:
<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="Brand" style="padding-top: 10px; padding-bottom: 10px">
<img style="height: 30px;"
src="/img/transparent-white-logo.png">
</a>
</div>
其他回答
这不是语义上的，我只是使用现有的a元素，设置背景图像，然后为@2倍分辨率创建多个变量，较小的屏幕尺寸等。
然后，您可以使用.text-hide类以传统的方式在页面上获取一些文本。简单而有效，但不是正确使用图像。
下面是文本替换助手类的链接:
http://getbootstrap.com/css/#helper-classes
我的解决方案是添加css“display: inline-block”到img标签。
<img style="display: inline-block; height: 30px; margin-top: -5px">
演示：杰斯菲德尔
我还通过css后台属性实现它。它在任何宽度值下都能正常工作。
.navbar-brand{
float:left;
height:50px;
padding:15px 15px;
font-size:18px;
line-height:20px;
background-image: url("../images/logo.png");
background-repeat: no-repeat;
background-position: left center
}
<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这是我的草案代码，它已经工作:)这里是截图。
快速修复:为你的logo创建一个类，并设置高度为28px。这适用于所有设备上的导航栏。注意，我说的是“WELL”。
.logo {
display:block;
height:28px;
}
