徽标不适合于Bootstrap导航栏。

Question

我试图将导航栏中的图片改为更大的尺寸。

然而，这样做会使导航栏变形。

我有代码在这里：http://www.bootply.com/941lMP3fj6# 问题可能是因为图像位于锚标记中，但不确定。

- sanders

Answer 1

试试：

.navbar-brand 
{
    padding-top: 0;
}

工作中：http://www.bootply.com/cCg5FvZyZP

- George G

---

这是正确的。你有/曾经有padding: 15px 15px;。将其更改为padding: 0 15px 15px 15px;将仅去除顶部填充，同时保留其他填充。 - James Korden

看着你的解决方案，现在似乎有一个丑陋的1px边框，其后跟着20px的底部填充 - 这是设计上的吗？ - StevenP

@StevenP 这是原帖发布的内容 :)) - George G

Answer 2

将此添加到您的样式表中：

.navbar-brand
{
    margin: 0;
    padding: 0;
{

.navbar-brand img
{
    max-height: 100%;
}

http://www.bootply.com/rAzwwIbCBI

- Luke

Answer 3

您需要调整导航栏的高度。

您可以在LESS中使用此变量来调整高度，它将垂直居中导航栏并包含所有必要的填充：

@navbar-height

默认值为50px。

在常规CSS中如何调整它是更改.navbar的min-height和navbar-fixed-top的高度，然后调整.navbar-nav的填充。

这是顶部应该结构化的方式（缺少navbar-header）：

    <div class="navbar navbar-default navbar-fixed-top">
            <div class="container">
               <div class="navbar-header">
                <button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" rel="home" href="/" title="www.site.nl">                        
                    <img src="//placehold.it/200x51">
                </a>
              </div>

示例Bootply：http://www.bootply.com/tOoeM8o8Om

此处提供一个Bootply示例，具体链接如上。

- Aibrean

---

当链接的解决方案被折叠时，下拉菜单会出现在图像的顶部。 - StevenP

Answer 4

<div class="container">
                <button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <div class="navbar navbar-collapse collapse navbar-responsive-collapse">
                    <div class="pull-left" style="margin-right: 15px;">
                         <a rel="home" href="/" title="www.site.nl">

                    <img src="//placehold.it/200x51">
                </a>
                    </div>
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="">Home</a></li>
                        <li><a href="">About</a></li>
                        <li><a href="">Link 1</a></li>
                        <li><a href="">Link 2</a></li>
                    </ul> <!-- end nav-->
                    <ul class="nav navbar-nav pull-right">
                        <li class="dropdown">
                            <a href="" class="dropdown-toggle" data-toggle="dropdown"><strong class="caret"></strong> Select language</a>
                            <ul class="dropdown-menu dropdown-menu-right">
                                <li><a href="">NL</a></li>
                                <li><a href="">IL</a></li>
                                <li><a href="">ENG</a></li>
                            </ul>
                        </li>
                    </ul> <!-- end nav menu right -->
                </div> <!-- end nav-collapse -->

            </div>

将您的徽标放置在容器内。

上述代码有效！

检查并告诉我是否有任何问题！

- Raja Sekar