twitter-bootstrap Bootstrap - 如何向导航栏类添加徽标？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28358483/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap - How to add a logo to navbar class?
提问by Design2u
I would like to add a logo to the top navbar within the navbar-brand. I would like it to scale with the viewport size so I'm using img-responsive2 class.
我想在导航栏品牌的顶部导航栏中添加一个标志。我希望它与视口大小一起缩放，所以我使用的是 img-responsive2 类。
It appear that both the image and the text in the navbar-brand are wrapping to the next line.
导航栏品牌中的图像和文本似乎都换行到下一行。
This page can be viewed at http://digitalponddesign.com/dev/
该页面可以在http://digitalponddesign.com/dev/查看
Thanks in advance for you help.
预先感谢您的帮助。
Here is my code:
这是我的代码：
Html
html
<h2 class="navbar-brand brand-name">
<a href="index.html"><img class="img-responsive2"
src="images/DigitalPondlogo.png">DigitalPond</a>
</h2>
CSS
CSS
.navbar {
margin: 10px 0;
}
.navbar-default {
background-color: #fff;
border-color: #fff;
}
.brand-name {
font-family: 'Josefin Slab', serif;
font-size: 47px;
font-weight: bold;
color: #444;
text-decoration: none;
}
.nav-container {
padding-top: 8px;
}
.navbar-custom {
font-size: 20px;
background-color: #FFF;
}
回答by Design2u
I found a solution on another thread that works - use the pull-leftclass:
我在另一个有效的线程上找到了一个解决方案 - 使用pull-left类：
<a href="#" class="pull-left"><img src="/path/to/image.png"></a>
Thanks to Michael in this thread:
感谢迈克尔在这个线程中：
回答by vbranden
You can just display both the text and image as inline-blocks so that they dont stack. using floats like pull-left/pull-right can cause undesired issues so they should be used sparingly
您可以将文本和图像都显示为行内块，这样它们就不会堆叠。使用像 pull-left/pull-right 这样的浮动会导致不希望的问题，所以应该谨慎使用它们
<a class="navbar-brand" href="#">
<img src="mylogo.png" style="display: inline-block;">
<span style="display: inline-block;">My Company</span>
</a>
回答by Yeku Wilfred Chetat
For those using bootstrap 4 beta you can add max-width on your navbar link to have control on the size of your logo with img-fluid class on the image element.
对于使用 bootstrap 4 beta 的用户，您可以在导航栏链接上添加 max-width 以通过图像元素上的 img-fluid 类来控制徽标的大小。
<a class="navbar-brand" href="#" style="max-width: 30%;">
<img src="images/logo.png" class="img-fluid">
</a>
回答by Nagibaba
Enter the image and give height:100%;width:autothen just change the height of navbar itself to resize image. There is a really good example in codepen. https://codepen.io/bootstrapped/pen/KwYGwq
输入图像并给出height:100%;width:auto然后只需更改导航栏本身的高度即可调整图像大小。codepen 中有一个非常好的例子。https://codepen.io/bootstrapped/pen/KwYGwq
回答by Christos Ploutarchou
Use a image style width and height 100% . This will do the trick, because the image can be resized based on the container.
使用图像样式 width 和 height 100% 。这将奏效，因为可以根据容器调整图像大小。
Example:
例子：
<a class="navbar-brand" href="#" style="padding: 4px;margin:auto"> <img src="images/logo.png" style="height:100%;width: auto;" title="mycompanylogo"></a>
回答by Jacob Mathen Alex
<a class="navbar-brand" href="#" style="padding:0px;">
<img src="mylogo.png" style="height:100%;">
</a>
For including a text:
对于包含文本：
<a class="navbar-brand" href="#" style="padding:0px;">
<img src="mylogo.png" style="height:100%;display:inline-block;"><span>text</span>
</a>
回答by sanjith edward
I would suggest you to use either an image or text. So, Remove the text and add it in your image(using Photoshop, maybe). Then, Use a width and height 100% for the image. it will do the trick. because the image can be resized based on the container. But, you have to manually resize the text. If you can provide the fiddle, I can help you achieve this.
我建议您使用图像或文本。因此，删除文本并将其添加到您的图像中（可能使用 Photoshop）。然后，为图像使用 100% 的宽度和高度。它会解决问题。因为图像可以根据容器调整大小。但是，您必须手动调整文本大小。如果您可以提供小提琴，我可以帮助您实现这一目标。
