将导航栏品牌的一部分放在栏外

Question

我真的不知道如何为此起个好标题，但我想要的基本上是这样的：

但我的结果是这样的

这是我的导航栏代码。 我正在使用 Bootstrap Vue 库

    .logo-home{
        width:50px;
        height:50px;
    }

.navbar-fh{
    background-color:#BAE5FF !important;
}

    <div>
        <b-navbar toggleable="lg" type="light" variant="secondary" class="navbar-fh">
            <b-navbar-brand to="/"> <img src="../../../public/LogoV1.png" alt="" class="logo-home">
            </b-navbar-brand>

            <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

            <b-collapse id="nav-collapse" is-nav>

                <!-- Right aligned nav items -->
                <b-navbar-nav class="ml-auto">
                    <b-nav-item to="/">Home</b-nav-item>
                    <b-nav-item to="/two">Page Two</b-nav-item>
                </b-navbar-nav>
            </b-collapse>
        </b-navbar>
    </div>

有什么办法可以让它看起来像第一张图片？

Answer 1

将徽标的位置更改为absolute位置，并根据需要使用top / left属性对其进行定位：

.logo-home{
  width:50px;
  height:50px;
  position: absolute;
  top: 20px;
}

并且不要忘记向下移动移动模式的菜单项。 使用以下样式将类（例如menu-items ）添加到您的b-navbar-nav （如<b-navbar-nav class="ml-auto menu-items"> ）：

@media (max-width: 991px) {
  .menu-items {
    margin-top: 40px;
  }
}

 new Vue({ el: "#app" });

 .logo-home{ width:60px; height:60px; background-color: blue; position: absolute; top: 20px; } @media (max-width: 991px) { .menu-items{ margin-top: 40px; } }

 <link href="https://unpkg.com/bootstrap@4.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://unpkg.com/bootstrap-vue@2.0.0-rc.11/dist/bootstrap-vue.css" rel="stylesheet"/> <script src="https://unpkg.com/vue@2.5.17/dist/vue.min.js"></script> <script src="https://unpkg.com/bootstrap-vue@2.0.0-rc.11/dist/bootstrap-vue.min.js"></script> <div id="app"> <b-navbar toggleable="lg" type="light" variant="secondary" class="navbar-fh"> <b-navbar-brand to="/"> <div class="logo-home"></div> </b-navbar-brand> <b-navbar-toggle target="nav-collapse"></b-navbar-toggle> <b-collapse id="nav-collapse" is-nav> <!-- Right aligned nav items --> <b-navbar-nav class="ml-auto menu-items"> <b-nav-item to="/">Home</b-nav-item> <b-nav-item to="/two">Page Two</b-nav-item> </b-navbar-nav> </b-collapse> </b-navbar> </div>