时间戳

首页 > 解决方案 > 如何在仍然响应的 boostrap 4 导航栏中制作重叠的徽标图像？

css - 如何在仍然响应的 boostrap 4 导航栏中制作重叠的徽标图像？

问题描述

我想在仍然响应的引导导航栏上有一个重叠的徽标（更改图像大小并且不吃汉堡包）

下午好，

我正在使用 Bootstrap 作为 Laravel Spark 脚手架的一部分，我正在努力解决一个非常具体的问题：

我怎样才能有一个仍然响应的重叠徽标，这意味着它仍然会根据视口改变其大小？

正如您在我的 Codepen中看到的，当我添加以下内容时，我得到了我想要的布局：

.navbar-brand {
    position: absolute;
}

.navbar-toggle {
    z-index:1;
}

但是，正如您在缩放浏览器窗口时看到的那样，这现在在响应式设计（双关语）方面“吞噬”了我的汉堡包图标。另外，徽标不会像这样缩放。

由于我不是 100% 适合 CSS 和 bootstrap，请问有什么可以帮助我的吗？

谢谢安德烈亚斯

标签： csstwitter-bootstrapbootstrap-4overlappingresponsive-images

解决方案

使用带有位置的 top 和 left 属性

.navbar-brand {
  position: absolute;
  top:0px;
  left:100px
}

推荐阅读