Question

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

在此处查看我的问题的快速示例： http://www.bootply.com/UP2MFV011K#

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

Answer 1

默认情况下，bootstrap图像的最小宽度为100％，这意味着一旦浏览器窗口小到足以为其100％宽度腾出空间，它就会移动导航。可能最简单的解决方案是在移动尺寸屏幕上将.navbar品牌宽度更改为80％。添加height:auto;会为您提供所需的响应高度。

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

请参阅我的解决方案。