Bootstrap 3带有标志的导航栏
我想使用带有图像标识的Bootstrap 3默认导航栏，而不是文本标记。 什么是正确的方式，而不会导致不同的屏幕尺寸有任何问题？ 我认为这是一个共同的要求，但我还没有看到一个好的代码示例。 除了在所有屏幕尺寸上具有可接受的显示以外，关键要求是在较小屏幕上的菜单可折叠性。
我试着把一个IMG标签放在带有navbar品牌类的A标签里面，但是导致菜单不能在我的android手机上正常工作。 我也尝试增加navbar类的高度，但是这更糟糕了。
顺便说一句，我的标志图像比导航栏的高度大。
为什么每个人都想努力做到这一点？ 当然，这些方法中的一些方法可行，但是它们比必要的更加复杂。
好的，首先 – 你需要一个适合你的导航栏的图像。 您可以通过CSS高度属性（允许宽度缩放）来调整图像，也可以使用适当大小的图像。 无论你决定做什么 – 这看起来将取决于你如何确定你的形象。
出于某种原因，每个人都想要将navbar-brand贴在锚点上，这是没有必要的。 navbar-brand应用不需要图像的文本样式，以及navbar-left类（就像navbar-left ，但用于导航栏）。 所有你真正需要的是添加navbar-left 。
<a href="#" class="navbar-left"><img src="/path/to/image.png"></a>
你甚至可以用一个navbar品牌的产品，这将出现在图像的右侧。
<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>
完整的演示与许多例子
重要更新：12/21/15
目前Mozilla中存在一个错误，我发现在某些浏览器宽度上打开导航栏时，在这个页面上进行了许多操作 。 基本上，mozilla的bug是在导航栏品牌链接上包含左右填充作为图像宽度的一部分。 然而，这可以很容易地解决，我已经testing了这一点，我相当确定这是在这个页面上最稳定的工作示例。 它会自动resize，适用于所有浏览器。
只需将其添加到您的css中，并使用navbar-brand，就像.img-responsive 。 您的标志将自动适合
.navbar-brand { padding: 0px; /* firefox bug fix */ } .navbar-brand>img { height: 100%; padding: 15px; /* firefox bug fix */ width: auto; }
另一种select是使用背景图像。 使用任何大小的图像，然后只需设置所需的宽度：
.navbar-brand { background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat; width: 200px; }
原始答案如下（仅供参考）
人们似乎忘记了很多东西。 就个人而言，我认为这是最简单的一个，因为图像自动调整到菜单大小。 如果你只是在图像上使用对象，它会自动调整到菜单高度。
.navbar-brand > img { max-height: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; }
有人指出，这在IE浏览器中是不行的。 有一个polyfill ，但是如果你不打算把它用于其他任何东西，那可能会过多。 它看起来像对象适合正在计划未来版本的IE浏览器，所以一旦发生这将适用于所有的浏览器。
但是，如果您在引导程序中注意到.img-responsive类，则最大宽度假设您将这些图像置于列中或者具有显式设置的某些东西。 这意味着100％具体意味着100％宽度的父元素。
.img-responsive max-width: 100%; height: auto; }
我们不能用导航栏的原因是因为父（.navbar品牌）具有50px的固定高度，但宽度没有设置。
如果我们采取这种逻辑，并根据高度将其反应为响应，则可以具有响应性图像，该图像可以缩放到.navbar品牌的高度，并且通过添加和自动设置宽度来调整比例。
max-height: 100%; width: auto;
通常我们必须添加display:block; 到场景，但由于navbar品牌已经浮动：左; 应用于它，它自动作为一个块元素。
您可能会遇到您的徽标太小的罕见情况。 img-responsive方法没有考虑到这一点，但我们会。 通过将“高度”属性添加到.navbar-brand > img您可以放心，它可以放大和缩小。
max-height: 100%; height: 100%; width: auto;
所以为了完成这个，我把它们放在一起，它似乎在所有的浏览器中完美的工作。
<style type="text/css"> .navbar-brand>img { max-height: 100%; height: 100%; width: auto; margin: 0 auto; /* probably not needed anymore, but doesn't hurt */ -o-object-fit: contain; object-fit: contain; } </style> <nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <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" href="http://disputebills.com"><img src="http://disputebills.com/site/uploads/2015/10/dispute.png" alt="Dispute Bills"></a> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> </div> </nav>
DEMO http://codepen.io/bootstrapped/pen/KwYGwq
虽然你的问题很有意思，但我不指望会有一个答案。 也许你的问题太广泛了。 您的解决scheme应该依赖于：导航栏中的其他内容（项目数量），徽标的大小，您的徽标如何响应等。在a（带有导航栏品牌）中添加徽标似乎是一个很好的起点。 我应该使用navbar品牌类，因为这将添加15像素的填充（顶部/底部）。
我使用300×150像素的徽标在http://getbootstrap.com/examples/navbar/上testing此设置。;
全屏> 1200：
768到992像素（菜单没有折叠）：
<768（折叠菜单）
除了审美方面，我没有发现任何技术问题。 在小屏幕上，一个大的标志可能会重叠或突破视口。 768和992像素之间的屏幕也有其他问题，当内容不适合排队时，请参阅例如： https : //github.com/bassjobsen/jamedo-bootstrap-start-theme/issues/18
默认的导航栏有默认的导航栏示例添加30px的底部空白页，所以导航栏的内容不应该与页面的内容重叠。 （当导航栏的高度变化时，固定的导航栏会有问题）。
您将需要一些CSS和媒体查询，以适应不同的屏幕尺寸的导航到您的需要。 请尝试缩小你的问题。 请描述你在android上find的问题。
更新见http://bootply.com/77512为例。;
在较小的屏幕上，如手机，折叠菜单出现在标志上方
互换您的代码中的button和标志，首先标志（设置浮动：在标志上留下）
没有办法将菜单项与顶部以外的任何东西alignment
为.navbar-collapse ul设置margin-top 。 使用徽标高度减去导航栏高度，以alignment底部或（徽标高度 – 导航栏高度）/ 2居中
说明如何创build一个大于默认高度（50px）的标志的引导程序导航栏：
标识为100px x 100px，标准CSS的示例 ：
-
计算徽标的高度和（填充顶部+填充底部）。 这里120px （100px高度+填充顶部（10px）+填充底部（10px））
-
转到引导/定制 。 设置而不是导航栏高度 50px> 120px （50 + 70）和navbar-collapse-max-height从340px到410px （340 + 70）。 下载 css。
-
在这个例子中，我使用这个导航栏 。 在navbar品牌 ：
<div class="navbar-header"> ... </button> <a class="navbar-brand myLogo" href="#"> <img src="yourLogo.jpg" /> </a> </div>...添加一个类，例如myLogo和一个img （你的标志）
<a class="navbar-brand myLogo" href="#"><img src="yourLogo.jpg" /></a>。 -
添加CSS
.myLogo {padding：10px; }
-
适合其他尺寸。
例
那么我终于得到了同样的问题工作，这里是我的解决scheme，我testing了我的网站在所有三个主要浏览器：Chrome浏览器，Firefox和Internet Explorer。
首先，如果您不使用基于文本的徽标，则完全删除“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="~/resourceshttp://img.dovov.comLogo_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）中的值可能会因您的徽标图片宽度而异，这是我的368px。 根据您的徽标大小，百分比也可能需要更改。 第一@media查询应该是你的门槛，我的图像宽度（368px）+折叠button大小（44px）+约60px，它出来了480px，这是我开始响应图像缩放。
请确保从HTML部分删除我的剃刀语法。 让我知道如果它解决了你的问题，它修理了我的。
编辑：对不起，我错过了你的导航栏高度问题。 有几个方法可以解决这个问题，我个人使用适当的导航栏高度来编译Bootstrap LESS，为了我的目的，我使用了70px，我的图像高度是68px。 第二种方法是在bootstrap.css文件本身中search“.navbar”并将最小高度更改为徽标的高度。
我使用img-responsive类，然后在a元素上设置最大宽度。 喜欢这个：
<nav class="navbar"> <div class="navbar-header"> <a class="navbar-brand" href="#"> <img class="img-responsive" src="mylogo.png"> </a> </div> </nav>
和CSS：
.navbar-brand { max-width: 50%; }
我的解决scheme是添加CSS“显示：内联块”img标记。
<img style="display: inline-block; height: 30px; margin-top: -5px">
演示： jsfiddle
你必须这样使用代码：
<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="logo" rel="home" href="#" title="Buy Sell Rent Everyting"> <img style="" src="/img/transparent-white-logo.png"> </a> </div>
A标签的类别必须是“标志”而不是导航品牌。
这取决于你想要你的标志有多高。
导航栏中默认的<a>高度是20像素，因此如果您在徽标上指定height: 20px ，则会很好地匹配。
然而，对于一个标志来说，这是小的，所以我select的是这样的：
<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>
通过在顶部添加负边距（5px是a上的填充和图像大小之间的差值的一半），这使得图像高30px并垂直alignment图像。
或者，您可以更改<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>
快速修复 ：为您的logo创build一个类，并将height设置为28px 。 这在所有设备上的导航栏上都能正常工作。 注意我说的作品“好”。
.logo { display:block; height:28px; }
我的方法是在手机，平板电脑，桌面，大型桌面上包含四个不同大小的不同图像，但只显示一个使用引导程序的响应实用程序类，如下所示：
<!--<a class="navbar-brand" href="<?php echo home_url(); ?>/"><?php bloginfo('name'); ?></a>--> <a class="navbar-brand visible-xs" href="<?php echo home_url(); ?>/"><img src="/assets/logo-phone.png" alt="<?php bloginfo('name'); ?> Logo" /></a> <a class="navbar-brand visible-sm" href="<?php echo home_url(); ?>/"><img src="/assets/logo-tablet.png" alt="<?php bloginfo('name'); ?> Logo" /></a> <a class="navbar-brand visible-md" href="<?php echo home_url(); ?>/"><img src="/assets/logo-desktop.png" alt="<?php bloginfo('name'); ?> Logo" /></a> <a class="navbar-brand visible-lg" href="<?php echo home_url(); ?>/"><img src="/assets/logo-large.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
注意：您可以用提供的代码replace注释行。 如果您不使用WordPress，请replacephp代码。
编辑注2：是的，这会添加请求到您的服务器时，加载页面可能会减慢一点，但如果你使用背景CSS精灵技术，可能是标志不打印时打印页面和上面的代码应得到更好的SEO。
我也通过CSS背景属性来实现它。 它在任何宽度值都有效。
.navbar-brand{ float:left; height:50px; padding:15px 15px; font-size:18px; line-height:20px; background-image: url("..http://img.dovov.comlogo.png"); background-repeat: no-repeat; background-position: left center }
另一种方法是将Bootstrap的内置.text-hide类与.navbar-brand一起使用，以用背景图像replace品牌文本/内容。
CSS：
.navbar-brand{ background: url(http://example.com/your-logo-here.png) center / contain no-repeat; width: 200px; }
HTML：
<a class="navbar-brand text-hide" href="#">Navbar Brand</a>
这是一个非常一致的方法，并保持您的图像居中。 要调整图像的大小，您只需调整.navbar-brand宽度，因为高度已设置。
这是一个现场演示
我有同样的问题。 我解决了这个问题：
<a href="#" class="btn btn-link navbar-btn"> <img class="img-responsive" src="#"> </a>
没有导航品牌的课程。 结果看起来像标志图片，适合导航栏，并像链接一样工作。 另外，我build议使用navbar-right类的菜单项，所以他们不会去下面的标志。
<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>
也许这太简单了，但我刚刚复制了navbar品牌系列，所以有两个，图像，然后是文本。
<a class="navbar-brand" href="index.php"><img class="img-responsive" src="images/my-icon.png" width="30" height="25" alt=" "></a> <a class="navbar-brand" href="index.php">My Brand</a>
我创build了一个适合导航栏内的图像（大约为高度的1/2）。
如果使用LESS，这个工作：
@navbar-height: 150px; @navbar-brand-vpadding: 10px; .navbar-brand img { height: @navbar-height - @navbar-brand-vpadding * 2; position: absolute; top: @navbar-brand-vpadding; }
如果您需要在工具栏中看到以品牌为中心和自动宽度，此代码可以很好地工作。 它包含Wordpressfunction从正确的path获取图像文件：
<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">
我的工作代码 – bootstrap 3.0.3。 当导航栏切换时，隐藏xs原始的标志图像。
<a class="navbar-brand hidden-xs" href="<?=$g4['path']?>/"> <img src="<?=$g4[path]?>http://img.dovov.comlogo_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]?>http://img.dovov.comlogo_opencode.gif" alt="brand logo" style="width:120px;"> </a>
您可以尝试使用@media查询，如下所示。
首先添加徽标类，然后使用@media指定每个设备尺寸的徽标高度和宽度。 在下面的例子中，我的目标设备的最大宽度为320像素（iPhone）你可以玩这个，直到你find最合适的。 简单的方法来testing：使用铬或Firefox检查元素。 尽可能缩小浏览器。 根据您指定的@media最大宽度观察徽标大小更改。 testingiPhone，Android设备，iPad等，以获得预期的结果。
.logo { height: 42px; width: 140px; } @media (max-width:320px) { .logo { height: 33px; width: 110px; } }
请尝试下面的代码：
<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>
没有做任何其他的答案在我的情况下工作（我可能没有通过智力testing），并经过一些实验，这就是我正在使用（我相信是非常接近Bootstrap默认）：
<div class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="navbar-logo"> <a class="navbar-brand" rel="home" href="@Url.Action("Index", "Home")" title="Home"> <img src="~/Images/logo.png" class="img-responsive"> </a> </div> <div class="collapse navbar-collapse" id="navbar-collapse"> <ul class="nav navbar-nav"> <li>@Html.ActionLink("Home", "Index", "Home")</li> <li>@Html.ActionLink("Coaching", "Coaching", "Home")</li> <li>@Html.ActionLink("Resources", "Resources", "Home")</li> <li>@Html.ActionLink("Contact", "Contact", "Home")</li> <li>@Html.ActionLink("Blog", "Blog", "Home")</li> <li>@Html.ActionLink("About", "About", "Home")</li> </ul> </div> </div> </div>
并在CSS文件中添加了以下内容：
.navbar-brand { padding-top: 5px; } .navbar-collapse { float: left; } .navbar-logo { float: left; }
请注意， @Html.ActionLink()是<a>标签的Razor语法。 它说@Html.ActionLink(...)只是用一个适当的<a>标签取代它。 同样，它说@Url.Action(...)取代它与一个适当的URL（在这种情况下没有<a>标记）。
这不是语义，但我只是使用现有a元素，设置背景图像，然后创build@ 2x分辨率，更小的屏幕尺寸等多个变化。
然后，您可以使用.text-hide类在页面上获取一些文本。 虽然不适当地使用图像，但简单而有效。
这里是帮助者类的文本replace的链接：
这个问题的最简单和最好的答案是设置一个最大的宽度和高度取决于你的标志，图像将是最高50px高，但不超过200px。
<a href="index.html"> <img src="imgs/brand-w.png" style="max-height:50px;max-width:200px;"> </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这是我的草稿代码，它已经在工作了:)下面是截图。
代替文字品牌，我分成两行，如下面的代码，并给img-responsive类…
<div class="collapse navbar-collapse navbar-ex1-collapse" style="background: #efefef; height:auto;"> <div class="container" style="margin-bottom:-1px;"> <div class="row"> <div class="col-md-3"> <div id="menubar-logo"> <a href="index.html"><img src="img/tl_logo.png" class="img-responsive" alt="Triple Luck IT Service Logo"></a> </div> </div> <div class=" col-md-offset-3 col-md-6"> <ul class="nav navbar-nav"> <li><a href="index.php" class="active">Home</a></li> <li><a href="about_us.php">About Us</a></li> <li><a href="contact_us.php">Contact Us</a></li> </ul> </div> </div> <!-- end of "row" --> </div> <!-- end of "container" --> </div> <!-- end of "collapse" -->
此外，我添加了以下的CSS代码…….
#menubar-logo img { margin-top: 10px; margin-bottom: 20px; margin-right: 10px; }
如果我的代码解决你的问题，这是我的荣幸…..
<div class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header" > <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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" href="Default.aspx"> <span> <img alt="Logo" src="Images/shopify-bag.png"height="35" width="40"/></span> Shopping GO</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"></ul>
//不要忘记在你的代docker部添加bootstrap。
