我想使用Bootstrap 3默认导航栏的图像标志，而不是文本品牌。什么是正确的方法来做到这一点，而不引起任何问题与不同的屏幕尺寸?我认为这是一个常见的需求，但我还没有看到一个好的代码示例。除了在所有屏幕尺寸上都有可接受的显示外，一个关键要求是小屏幕上的菜单可折叠性。
我试着在有navbar-brand类的A标签内放置一个IMG标签，但这导致菜单不能在我的android手机上正常运行。我还尝试了增加导航栏类的高度，但这把事情搞砸了。
顺便说一下，我的logo图像比导航栏的高度要大。
当前回答
快速修复:为你的logo创建一个类，并设置高度为28px。这适用于所有设备上的导航栏。注意，我说的是“WELL”。
.logo {
display:block;
height:28px;
}
其他回答
这段代码工作完美，如果你需要看到品牌居中和自动宽度工具栏。 它包含从正确路径获取图像文件的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">
将以下内容添加到.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
}
我没有替换文本标记，而是像下面的代码一样分成两行，并将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;
}
如果我的代码解决了您的问题，这是我的荣幸.....
我的方法是为手机、平板电脑、台式机、大型台式机包括四张不同大小的图像，但只显示一张使用bootstrap的响应实用程序类，如下所示:
<!--<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代码。
编辑Note2:是的，这会在加载页面时向服务器添加请求，这可能会变慢一点，但如果你使用后台css精灵技术，打印页面时很可能不会打印logo，上面的代码应该会得到更好的SEO。
对于这个问题，最简单和最好的答案是根据你的logo设置最大宽度和高度，图像的最大高度为50px，但不超过200px。
<a href="index.html">
<img src="imgs/brand-w.png" style="max-height:50px;max-width:200px;">
</a>
这取决于你的logo大小和你的导航栏项目。
