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

2018-06-24 15:18:45

在品牌徽标上使用带有img响应类的图像时，如何防止显示导航栏在徽标图像顶部叠加时崩溃的切换图标？我想要的是当浏览器窗口缩小时，徽标可以缩小。

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

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

默认情况下，自举图像的最小宽度为100％，这意味着一旦浏览器窗口足够小以为100％宽度腾出空间，它将移动浏览器。可能最简单的解决方案是将手机尺寸屏幕上的.navbar品牌宽度降低至80％。并添加height:auto; 会给你你想要的响应高度。

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

看我的解决方案。

http://codepen.io/egerrard/pen/OMdWGy

链接地址: http://www.djcxy.com/p/69011.html