twitter-bootstrap - 带有 Logo 或品牌名称文本的 Bootstrap 完全响应式导航栏

Question

我想在 Twitter Bootstrap 3.1.1 中做一个具有指定高度的完全响应式导航栏，其中品牌可以由图像( Logo )或文本组成。

html:

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1">

                <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="#">
                <img src="http://placehold.it/150x50&text=Logo" alt="">
            </a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

CSS:

body {
    margin-top: 125px;
}

.navbar-fixed-top .nav {
    padding: 15px 0;
}

问题是浏览器窗口缩小，菜单折叠后，导航栏恢复到原来的高度，logo图像如下:





另一个问题是更改 <img src="http://placehold.it/150x50&text=Logo" alt="">进入 <h3>AppName</h3>使得 AppName 不在中间:



目前它以设置填充值为中心，但我不知道如何使它独立于它。

有谁可以帮我解决这个问题？

问候

编辑:

这是我想要实现的效果的准备图像:

未折叠带有 Logo 图像的导航栏:



折叠导航栏(导航栏高度相同，图像大小相同，但导航栏宽度不同):



未折叠带有品牌名称文本的导航栏:



折叠的导航栏(除了由于更改浏览器的窗口宽度而导致的导航栏宽度外，其他一切都相同):

Answer 1

如果你想达到this (您可以调整窗口大小以查看移动版本的外观)，您所要做的就是拥有 2 个 Logo 图像(1 个用于桌面，1 个用于移动)并根据环境使用 visible-xs 显示它们和 hidden-xs类。

所以我用了这样的东西:

<img class="hidden-xs" src="http://placehold.it/150x50&text=Logo" alt="">
<img class="visible-xs" src="http://placehold.it/120x40&text=Logo" alt=""> 

当然，我使用以下方法设计了移动 Logo :

@media (max-width: 767px) { 
    .navbar-brand {
        padding: 0;        
    }

    .navbar-brand img {
        margin-top: 5px;
        margin-left: 5px;
    }
}

你可以看到所有的代码 here .如果您需要在移动版本上插入 Logo 的文本，这没什么大不了的。只需将 Logo 替换为 <h1 class="visible-xs">AppName</h3>并像这样更改媒体查询中的样式:

@media (max-width: 767px) { 
    .navbar-brand {
        padding: 0;        
    }

    .navbar-brand h1{
        //here add your style depending of the position you want the text to be placed
    }
} 

编辑:

您需要以下条件才能使其工作:

.navbar-toggle {
   margin: 23px 0; 
}

.navbar-nav, .navbar-nav li, .navbar-nav li a {
  height: 80px;
  line-height: 80px;
}

.navbar-nav li a {
  padding-top: 0;
  padding-bottom:0;
}