我想使用带有图像徽标而不是文本品牌的 Bootstrap 3 默认导航栏。这样做的正确方法是什么，而不会对不同的屏幕尺寸造成任何问题？我认为这是一个常见的要求，但我还没有看到一个好的代码示例。除了在所有屏幕尺寸上具有可接受的显示之外，一个关键要求是在较小屏幕上的菜单可折叠性。
我尝试将一个 IMG 标签放在具有 navbar-brand 类的 A 标签内，但这导致菜单在我的 android 手机上无法正常运行。我还尝试增加导航栏类的高度，但这更加搞砸了。
顺便说一句，我的徽标图像大于导航栏的高度。
为什么每个人都试图以艰难的方式做到这一点？当然，其中一些方法会起作用，但它们比必要的复杂。
好的，首先 - 您需要一个适合您的导航栏的图像。您可以通过 css 高度属性（允许宽度缩放）调整图像，也可以只使用适当大小的图像。无论您决定做什么 - 它的外观将取决于您调整图像的大小。
出于某种原因，每个人都想用 将图像粘贴在锚点内navbar-brand，这不是必需的。 navbar-brand将不需要的文本样式应用于图像以及navbar-left类（就像向左拉一样，但用于导航栏）。您真正需要的只是添加navbar-left.
<a href="#" class="navbar-left"><img src="/path/to/image.png"></a>
您甚至可以使用 navbar-brand 项目来跟踪它，该项目将显示在图像的右侧。
<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>
目前我发现Mozilla 中存在一个错误，该错误会破坏某些浏览器宽度上的导航栏，并在此页面上有很多演示。基本上，mozilla 错误包括导航栏品牌链接上的左右填充作为图像宽度的一部分。但是，这可以很容易地修复，并且我已经对此进行了测试，并且我相当确定它是此页面上最稳定的工作示例。它将自动调整大小并适用于所有浏览器。
只需将其添加到您的 css 并以与您相同的方式使用 navbar-brand 即可.img-responsive。您的徽标将自动适应
.navbar-brand {
padding: 0px; /* firefox bug fix */
}
.navbar-brand>img {
height: 100%;
padding: 15px; /* firefox bug fix */
width: auto;
}
另一种选择是使用背景图像。使用任何大小的图像，然后设置所需的宽度：
.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，但如果你不打算将它用于其他任何事情，那可能就太过分了。看起来 object-fit正在计划用于 IE 的未来版本，因此一旦发生这种情况，它将适用于所有浏览器。
但是，如果您注意到引导程序中的 .img-responsive 类，则 max-width 假设您将这些图像放在列中或具有显式设置的东西中。这意味着 100% 特别表示父元素的 100% 宽度。
.img-responsive
max-width: 100%;
height: auto;
}
我们不能将它与导航栏一起使用的原因是因为父级 (.navbar-brand) 具有 50px 的固定高度，但未设置宽度。
如果我们采用该逻辑并将其反转为基于高度的响应式，我们可以拥有一个缩放到 .navbar-brand 高度的响应式图像，并且通过添加和自动设置宽度，它将调整为比例。
max-height: 100%;
width: auto;
通常我们必须添加display:block;到场景中，但由于 navbar-brand 已经有 float:left; 应用于它，它会自动充当块元素。
您可能会遇到徽标太小的罕见情况。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>
尽管您的问题很有趣，但我不认为会有一个答案。也许你的问题太宽泛了。您的解决方案应取决于：导航栏中的其他内容（项目数）、徽标的大小、您的徽标是否具有响应性等。在 a（带有导航栏品牌）中添加徽标似乎是一个很好的起点。我应该使用 navbar-brand 类，因为这将添加 15 像素的填充（顶部/底部）。
我在http://getbootstrap.com/examples/navbar/上使用 300x150 像素的徽标测试此设置。
全屏 > 1200：
768 到 992 像素之间（菜单未折叠）：
<768（菜单折叠）
除了美学方面，我没有发现任何技术问题。在小屏幕上，大徽标可能会重叠或突破视口。当内容不适合一行时，768 到 992 像素之间的屏幕也会出现其他问题，例如：https ://github.com/bassjobsen/jamedo-bootstrap-start-theme/issues/18
默认导航栏具有默认导航栏示例添加 30px 的下边距，因此导航栏的内容不应与页面内容重叠。（当导航栏的高度变化时，固定的导航栏会出现问题）。
您将需要一些 css 和媒体查询来使导航栏适应您在不同屏幕尺寸上的需要。请尝试缩小您的问题。描述你在android上发现的问题。
更新见http://bootply.com/77512的例子。
在电话等较小的屏幕上，折叠菜单显示在徽标上方
交换代码中的按钮和徽标，首先是徽标（在徽标上设置 float:left）
没有办法将菜单项与除顶部之外的任何内容对齐
设置margin-top为.navbar-collapse ul。使用徽标高度减去导航栏高度，对齐到底部或（徽标高度 - 导航栏高度）/2 到中心
带有 100px x 100px 标志的示例，标准 CSS：
计算徽标的高度和（顶部填充 + 底部填充）。这里120px（100px 高度 + padding top (10px) + padding bottom (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 { 填充：10px; }
适合其他尺寸。
好吧，我终于解决了同样的问题，这是我的解决方案，我在我的网站上在所有三种主要浏览器中对其进行了测试：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="~/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) 中的值可能会根据您的徽标图像宽度而有所不同，我的是 368px。百分比也可能需要根据您的徽标大小进行更改。第一个@media 查询应该是你的阈值，我的是图像宽度（368 像素）+ 折叠按钮大小（44 像素）+ 大约 60 像素，结果是 480 像素，这是我开始响应式图像缩放的地方。
请务必从 HTML 部分中删除我的剃刀语法。让我知道它是否解决了您的问题，它解决了我的问题。
编辑：对不起，我错过了您的导航栏高度问题。有几种方法可以解决这个问题，我个人使用适当的导航栏高度编译 Bootstrap LESS，出于我的目的，我使用 70 像素，我的图像高度为 68 像素。第二种方法是在 bootstrap.css 文件本身中，搜索“.navbar”并将 min-height: 更改为徽标的高度。
我的解决方案是将 css "display: inline-block" 添加到 img 标签。
<img style="display: inline-block; height: 30px; margin-top: -5px">
演示：jsfiddle
我使用 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%;
}
您必须像这样使用代码：
<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 类标签必须是“徽标”而不是导航栏品牌。
快速修复：为您创建一个类logo并将其设置height为28px. 这适用于所有设备上的导航栏。注意我说的作品“WELL”。
.logo {
display:block;
height:28px;
}
这取决于您希望徽标的高度。
导航栏中的默认<a>高度是 20px，所以如果你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>
这使图像高 30 像素，并通过在顶部添加负边距来垂直对齐图像（5 像素是 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 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>
注意：您可以用提供的代码替换注释行。如果您不使用 wordpress，请替换 php 代码。
编辑注2：是的，这会在加载页面时向您的服务器添加请求，这可能会减慢一点，但如果您使用背景 css sprite 技术，则打印页面时可能不会打印徽标，上面的代码应该得到更好的搜索引擎优化。
您不需要添加额外的 CSS，因为 Bootstrap3 确实提供了它。除非您确实想添加它。这是我将徽标放在左侧并链接到右侧的代码。此导航是响应式的。在您认为合适的情况下对此进行更改。
HTML：
<nav class="navbar navbar-expand-lg navbar-light fixed-top" style="background-color:white;">
<div class="container">
<a class="navbar-brand" href="#"><img style=" width: 150px;" src="image.jpg" alt="Image text"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Projects</a></li>
<li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
我有同样的问题。我是这样解决的：
<a href="#" class="btn btn-link navbar-btn">
<img class="img-responsive" src="#">
</a>
没有导航栏品牌类。结果看起来像适合导航栏的徽标图片，并且像链接一样工作。此外，我建议对菜单项使用 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>
我也通过 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
}
将以下内容添加到.navbar-brand类中
.navbar-brand
{
padding: 0px; // this allows the image to occupy all the padding space of the navbar--brand
}
.navbar-brand > img
{
height: 100%; // set height to occupy full height space on the navbar-brand
width: auto; // width should be auto to allow img to scale accordingly
max-height: 100%; // optional
margin: 0 auto; // optional
}
另一种方法是实现Bootstrap 的内置.text-hide类，.navbar-brand将品牌文本/内容替换为背景图像。
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宽度，因为高度已经设置。
如果使用 LESS，这有效：
@navbar-height: 150px;
@navbar-brand-vpadding: 10px;
.navbar-brand img {
height: @navbar-height - @navbar-brand-vpadding * 2;
position: absolute;
top: @navbar-brand-vpadding;
}
也许这太简单了，但我只是复制了 navbar-brand 行，所以有两个，图像和文本。
<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>
我创建了一个适合导航栏的图像（大约是高度的 1/2）。
如果您需要在工具栏中看到品牌居中并具有自动宽度，则此代码非常有效。它包含从正确路径获取图像文件的 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">
这个问题最简单和最好的答案是根据您的徽标设置最大宽度和高度，图像的最大高度为 50 像素，但不超过 200 像素。
<a href="index.html">
<img src="imgs/brand-w.png" style="max-height:50px;max-width:200px;">
</a>
这将根据您的徽标大小和您拥有的导航栏项目而有所不同。
我没有替换文字品牌，而是像下面的代码那样分成两行，并给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;
}
如果我的代码解决了你的问题，我很高兴......
This isn't semantic but I just use the existing a element, set a background image, then create multiple variations for @2x resolution, smaller screen sizes, etc.
Then, you can use the .text-hide class to get some text on the page the ol' fashion way. Simple and effective though not proper use of an image.
Here's a link to the helper class for text-replacement:
我的工作代码 - 引导程序 3.0.3。navbar-toggle 时，隐藏-xs 原始标志图像。
<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>
请尝试以下代码：
<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>
在我的情况下未能使任何其他答案起作用（我可能没有通过智力测试）并且经过一些实验，这就是我正在使用的（我相信它非常接近 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>在这种情况下没有标签）。
<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 这是我的草稿代码，它已经在工作了:) 这是屏幕截图。
您可以尝试使用@media 查询，如下所示。
首先添加一个徽标类，然后使用@media 指定每个设备尺寸的徽标高度和宽度。在下面的示例中，我针对的是最大宽度为 320 像素（iPhone）的设备，您可以尝试使用它，直到找到最合适的设备。简单的测试方法：使用带有检查元素的 chrome 或 Firefox。尽可能缩小浏览器。根据您指定的@media 最大宽度观察徽标大小的变化。在 iPhone、Android 设备、iPad 等设备上进行测试以获得所需的结果。
.logo {
height: 42px;
width: 140px;
}
@media (max-width:320px) {
.logo {
height: 33px;
width: 110px;
}
}
<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>
//不要忘记在代码头部添加引导程序。