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

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

看到这里我的问题的一个简单的例子： http://www.bootply.com/UP2MFV011K#

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

2016-02-12 user5919866

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

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

查看我的解决方案。

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

来源

2016-02-12 18:56:07

是啊，那工作还算不错，但一旦你达到311像素宽，然后将图像跳下来。当然，在那个小窗口可能不用担心，但看到图像继续向下缩放并且不会跳到低于切换导航栏的位置上仍然很好。另外，如何让navbar-header的高度与图片的高度相匹配，这样图片就不会重叠，然后两者都会响应地缩小。 – user5919866

如果您在按钮周围添加一个容器，则可以添加一些样式以强制其在剩余的20％宽度内。另外，添加'.navbar-brand {height：auto;}'会让你找到你想要的高度。看到我的codepen链接上面看到它的行动。如果你需要将导航链接对齐，你必须做一些额外的CSS，但这至少可以回答你的问题。 –

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

回答

相关问题