我想使用Bootstrap 3默认导航栏的图像标志，而不是文本品牌。什么是正确的方法来做到这一点，而不引起任何问题与不同的屏幕尺寸?我认为这是一个常见的需求，但我还没有看到一个好的代码示例。除了在所有屏幕尺寸上都有可接受的显示外，一个关键要求是小屏幕上的菜单可折叠性。
我试着在有navbar-brand类的A标签内放置一个IMG标签，但这导致菜单不能在我的android手机上正常运行。我还尝试了增加导航栏类的高度，但这把事情搞砸了。
顺便说一下，我的logo图像比导航栏的高度要大。
当前回答
<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这是我的草案代码，它已经工作:)这里是截图。
其他回答
请尝试以下代码:
<style>
.navbar a.navbar-brand {padding: 9px 15px 8px; }
</style>
<a class="navbar-brand" href="#">
<img src="http://placehold.it/140x34/000000/ffffff/&text=LOGO" alt="">
</a>
好吧，我终于得到了同样的问题，这是我的解决方案，我在我的网站上测试了三种主要的浏览器:Chrome, Firefox和Internet Explorer。
首先，如果你没有使用基于文本的logo，那么完全删除“navbar-brand”，因为我发现这个特殊的类是导致我的导航菜单折叠的主要原因。
感谢user3137032引导我走向正确的方向。
你需要做一个自定义响应式图像容器，我把我的命名为logo
下面是引导HTML标记:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="@Url.Action(" Index ", "Home ")" class="logo"><img src="~/resources/images/Logo_Concept.png" /></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<a href="@Url.Action(" About ", "Home ")">
<i class="glyphicon glyphicon-info-sign"></i> About
</a>
</li>
<li>
<a href="@Url.Action(" Contact ", "Home ")">
<i class="glyphicon glyphicon-phone"></i> Contact
</a>
</li>
<li>
<a href="@Url.Action(" Index ", "Products ")">
<i class="glyphicon glyphicon-tag"></i> Products
</a>
</li>
</ul>
</div>
</div>
</div>
和CSS代码:
.logo img {
width: 100% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 100%;
}
@media (max-width:480px) {
.logo img {
width: 70% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 70% !important;
}
}
@media (max-width:400px) {
.logo img {
width: 75% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 75%;
}
}
@media (max-width:385px) {
.logo img {
width: 70% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 70%;
}
}
@media (max-width:345px) {
.logo img {
width: 65% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 65%;
}
}
@media (max-width:335px) {
.logo img {
width: 60% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 60%;
}
}
@media (max-width:325px) {
.logo img {
width: 55% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 55%;
}
}
@media (max-width:315px) {
.logo img {
width: 50% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 50%;
}
}
@media (max-width: x)中的值可能会根据logo图像的宽度而变化，我的是368px。百分比也可能需要根据你的标志的大小而改变。第一个@media查询应该是你的阈值，我的是图像宽度(368px) +折叠按钮大小(44px) +大约60px，结果是480px，这是我开始响应式图像缩放的地方。
请确保从HTML部分中删除我的剃刀语法。如果它解决了你的问题，就告诉我，它解决了我的问题。
编辑:对不起，我错过了你的导航栏高度问题。有几种方法可以做到这一点，就我个人而言，我用适当的导航栏高度来编译Bootstrap LESS，对于我的目的，我使用70px，我的图像高度是68 px。第二种方法是在bootstrap.css文件中搜索“”。然后改变min-height:到你的logo的高度。
我的工作代码- bootstrap 3.0.3。 当导航条切换，隐藏的x原始标志图像。
<a class="navbar-brand hidden-xs" href="<?=$g4['path']?>/">
<img src="<?=$g4[path]?>/images/logo_opencode.gif" align=absmiddle alt="brand logo">
</a>
<a class="navbar-brand navbar-toggle" href="<?=$g4['path']?>/" style="border:0;margin-bottom:0;">
<img src="<?=$g4[path]?>/images/logo_opencode.gif" alt="brand logo" style="width:120px;">
</a>
我也有同样的问题。我是这样解决的:
<a href="#" class="btn btn-link navbar-btn">
<img class="img-responsive" src="#">
</a>
没有navbar-brand类。结果看起来像徽标图片，适合导航栏和工作就像一个链接。此外，我建议使用导航栏右侧类的菜单项，这样他们就不会到下面的标志。
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav" role="navigation">
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
</ul>
</div>
虽然你的问题很有趣，但我不认为会有一个答案。也许你的问题太宽泛了。 你的解决方案应该取决于:导航栏中的其他内容(条目的数量)，你的logo的大小，你的logo是否响应，等等。 在a中添加logo(使用navbar-brand)似乎是一个很好的起点。我应该使用navbar-brand类，因为这将添加一个15像素的填充(顶部/底部)。
我在http://getbootstrap.com/examples/navbar/上用300x150像素的logo测试了这个设置。
全屏> 1200:
768到992像素之间(菜单未折叠):
<768(菜单折叠)
除了美学方面，我没有发现任何技术问题。在小屏幕上，大标志可能会重叠或打破视口。 在768到992像素之间的屏幕上，当内容不在一条线上时，还会出现其他问题，例如:https://github.com/bassjobsen/jamedo-bootstrap-start-theme/issues/18
默认的导航栏示例添加了一个30px的底边距，所以你的导航栏的内容永远不会与你的页面的内容重叠。(固定导航栏会有问题时，导航栏的高度变化)。
您将需要一些css和媒体查询，以适应导航栏在不同屏幕尺寸上的需要。请缩小你的问题范围。B.e.描述一下你在android上发现的问题。
更新示例请参见http://bootply.com/77512。
在手机等较小的屏幕上，折叠菜单出现在logo上方
在代码中转换按钮和logo，首先是logo(设置float: logo上的左)
除了顶部，没有办法将菜单项对齐到任何地方
为.navbar-collapse ul设置margin-top。使用标志高度减去导航栏高度，以对齐到底部或(标志高度-导航栏高度)/ 2到中心
