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

Question

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

---

下午好，

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

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

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

.navbar-brand {
    position: absolute;
}

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

但是，正如您在缩放浏览器时看到的那样 window，现在 "eats up" 我的汉堡包图标采用响应式设计（双关语意）。另外，徽标不会像这样缩放。

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

谢谢 安德烈亚斯

Answer 1

使用位置

的 top 和 left 属性

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

Answer 2

我自己修好了。这是基础

// HTML    
<a class="navbar-brand" href="{{ route('home') }}">
    <img src="/img/logo.png" class="img-fluid" alt="Responsive image">
</a> 

这只是一个 CSS 问题：

 // CSS
  .img-fluid {
        max-width: 100%;
        height: auto;
        position: absolute;
        top: 0;
    }

因为 Logo 一直很好看，所以我省略了根据屏幕调整图像大小的策略。