Bootstrap导航栏品牌标志 - 肖像图像已被切断？

问题描述：

继page之后，使用图片徽标代替导航品牌的文字，我遇到了这个问题，肖像标志被任何内容/文字/图片/ carousal切断。Bootstrap导航栏品牌标志 - 肖像图像已被切断？

我该如何解决？

<!-- Brand and toggle get grouped for better mobile display --> 
<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/150x200&text=Logo" alt=""> 
    </a> 
</div>

结果：

增加.navbar-header的高度。 –

我需要更多关于照片的细节。你能发布完整的HTML和CSS吗？ –

答

尝试添加的z-index到您的导航栏，像这样在你的CSS文件，因为它看起来像你的前景图像重叠它

.navbar-header { 
    z-index: 100; 

}

然后，导航将在图像上。导航不固定，所以没有意义。 –

@LeonLaci问题在于，一旦应用了z-index，图像目前就隐藏在旋转木马后面，您将看到该图像完整显示，之后他们需要重新调整导航栏以使其看起来干净整洁导航栏不固定的事实意味着一旦滚动视线不见，图像也会如此。但是具有这种高度的导航将完全不合适 –

答

向img添加最大高度。

max-height: 100%; 
height: 100%; 
width: auto;

Bootstrap导航栏品牌标志 - 肖像图像已被切断？

相关推荐