Twitter bootstrap 防止切换导航栏图标堆叠在品牌徽标顶部

在品牌徽标上使用带有img responsive class的图像时，如何防止导航栏折叠时显示的切换图标堆叠在徽标图像的顶部？我想要的是，当浏览器窗口缩小时，徽标缩小

请参见我的问题的快速示例：

---

我的徽标是398x120像素，它需要有导航头的高度，以适应其大小。然后，当浏览器窗口缩小时，缩小徽标图像，但不允许切换导航图标堆叠在顶部。目前，在徽标开始缩小之前，切换图标最终将堆叠在顶部。

默认情况下，引导图像的最小宽度为100%，这意味着一旦浏览器窗口足够小，足以为其100%的宽度腾出空间，它将移动导航图标。最简单的解决方案可能是将移动屏幕上的.navbar品牌宽度降低到80%。增加

高度：自动将为您提供所需的响应高度

.navbar-brand{
    width:80%;
    height:auto;
}

看看我的解决方案

是的，效果相当不错，但一旦达到311像素的宽度，图像就会往下跳。当然，在这么小的一个窗口上，可能不必担心，但看到图像继续向下缩放，而不是在切换导航下跳跃，仍然是件好事。另外，如何获得导航栏标题的高度，使其与图像的高度相匹配，这样图像就不会重叠，然后两者都相应地缩小。如果在按钮周围添加一个容器，则可以添加一些样式，使其位于剩余宽度的20%。另外，添加
.navbar brand{height:auto；}
将获得您想要的高度。请参阅上面我的代码笔链接以查看它的运行情况。如果你需要导航链接底部对齐，你需要做一些额外的css，但这至少回答了你的问题。